私のHTMLページからjsonを返す

私は、人々がテキストの中に書き込む情報を含むユーザーフォームを構築するためのHTMLコードを作成しました。このページには、入力したすべての情報を取り込んでjsonファイルに変換するボタンもあります。私のHTMLページからjsonを返す

私は以前これをやったことがないので、どうすればいいのか分かりません。私が読んだ限り、私はjsonを返すことができるように、htmlコードを送るためにローカルサーバーが必要であると理解していますが、これを行うプロセスは私にとっては絶対に不明です。私はそれが何もしない「私のデータを取得」ボタンをクリックすると、その後

<!DOCTYPE html> 
<html> 
<header> 
    <h1>My Promo</h1> 
    <h2>Get insights out of an endless see of data...</h2> 
    <link rel="stylesheet" href="mycss.css"> 
</header> 

<form action="http://localhost/" method="post"> 

<!-- Input label --> 
<div class="formgroup" id="name-form"> 
    <label for="name">What is your banner?*</label> 
    <input type="text" name="banner" /> 
</div> 

<!-- Input label --> 
<div class="formgroup" id="name-form"> 
    <label for="name">Name of current promo*</label> 
    <p>(write a short name, e.g: "DPE17")</p> 
    <input type="text" name="CurrentPromo" /> 
</div> 

<div class="submit"> 
    <input type="submit" value="Get my data" /> 
</div> 

</form> 
</html>

：

HTMLでの私のコードはこれです。

これからjsonをキャプチャするプロセスを教えてもらえますか？

多くの感謝！

出典

2017-11-21 Gabriela Martinez

（角度はRESTベースのアプリケーションに適しています）あなたは、[このリンクを参照してください] PHPのような、そうするために、サーバー側の言語を必要とする（https://www.w3schools.com/ php/php_forms.asp） – M0ns1f

特定のJSON構造について言及していないので、私は以下のコードはあなたのために働くと思います。必要に応じてカスタマイズする必要があります。

私は見つけると異なるのJavaScriptライブラリをチェックして、クライアント側のアプリケーションのための最高のあなたに合ったものを見るためにあなたをお勧めします。それはRESTサーバであれば

はまたチェック（jQueryのは、学ぶことが最も簡単です）。それに基づいて、クライアント側のJavaScriptフレームワークを決定します。

function onSubmitForm(myForm){ 
 
    var formjson = JSON.stringify($(myForm).serializeArray()); // <----------- 
 

 
    console.log(formjson); 
 
    return false; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<header> 
 
    <h1>My Promo</h1> 
 
    <h2>Get insights out of an endless see of data...</h2> 
 
    <link rel="stylesheet" href="mycss.css"> 
 
</header> 
 

 
<form action="http://localhost/" method="post" class="myform" onsubmit='return onSubmitForm(this)'> 
 

 
<!-- Input label --> 
 
<div class="formgroup" id="name-form"> 
 
    <label for="name">What is your banner?*</label> 
 
    <input type="text" name="banner" /> 
 
</div> 
 

 
<!-- Input label --> 
 
<div class="formgroup" id="name-form"> 
 
    <label for="name">Name of current promo*</label> 
 
    <p>(write a short name, e.g: "DPE17")</p> 
 
    <input type="text" name="CurrentPromo" /> 
 
</div> 
 

 
<div class="submit"> 
 
    <input type="submit" value="Get my data" /> 
 
</div> 
 

 
</form> 
 
</html>

出典

2017-11-21 22:42:18

ここで、onSubmitForm関数を挿入するはずですか？私はあなたのPCで送信したコードを実行し、サーバーはHTTPエラー405を投げた –

JavaScriptファイルを作成し、あなたのHTMLコードに含める。 https://www.w3schools.com/js/js_whereto.aspを確認してください。 –

私のHTMLページからjsonを返す

答えて

関連する問題