JSONを使用してHTMLフォームを送信およびテストする

Question

PHPデベロッパーと仕事をしていて、4つのチェックボックスを含むHTMLフォームをJSON文字列としてサーバーに送信する作業がありました。ただし、フォーム送信ボタンをクリックするたびにページがリセットされ、フォームが正しく送信されているかどうかを確認することはできません。 JSコードに警告やconsole.logを追加すると、それらは実行されません。私は****をウェブサイトのURLに追加しました。

フォームは、3つの文字列と4つのチェックボックスを2つの異なるJSONリンクに送信することになっています。後で検証を追加して、なぜコードを実行しないのか理解したかっただけです。投稿時にページがリフレッシュされるため、アラートが機能しないと思いますが、それが動作しているかどうかをテストするにはどうすればよいですか？

ありがとうございます。

これは、JSスクリプトです：

$("#form1").submit(function(e) { 
     //LADO SERVIDOR (ARQUIVO PHP) https://pt.stackoverflow.com/questions/15661/receber-ajax-json-post-no-php-e-retornar-no-sucesso 
     e.preventDefault(); 
     var identificador = $(nome  )[0].value; 
     var descricao  = $(descricao)[0].value; 
     var password  = $(password )[0].value; 
     $('.somename').each(function(e){ 
      if($(this).is(':checked')) 
      list = list + $(this).attr('id')+","; 
     }); 
     $.getJSON('******/get?code=3001&desc='+descricao+'&key='+password+'&format=json&charset=utf-8&lang=pt_br', function(data){}); 
     $.getJSON('********/get?code=3004&id='+identificador+'&sr='+list+'&format=json&charset=utf-8&lang=pt_br', function(data){}); 
     alert(list); 
    }); 

HTML（ブートストラップを使用して）一部：

      <div class="form-group"> 
           <label>Identificador do empreendimento</label> 
           <input class="form-control" placeholder="Identificador para identificar a empreendimento" id="nome"> 
          </div> 
          <div class="form-group"> 
           <label>Descrição do empreendimento</label> 
           <input class="form-control" placeholder="Descreva o objetivo do empreendimento" id="descricao"> 
          </div> 
          <div class="form-group"> 
           <label>Palavra-chave</label> 
           <input class="form-control" placeholder="Palavra-chave para acessar a empreendimento" id="password"> 
          </div> 

<!--        <div class="form-group"> 
           <label>Static Control</label> 
           <p class="form-control-static">email@example.com</p> 
          </div> --> 
          <div class="form-group"> 
           <label>Selecione as fontes de energia</label> 
           <div class="checkbox"> 
            <input class="somename" type="checkbox" id="1" value="1" name="eolica"> Eolica 
            <br> 
            <input class="somename" type="checkbox" id="2" value="2" name="solar"> Solar 
            <br> 
            <input class="somename" type="checkbox" id="3" value="3" name="biomassa"> Biomassa 
            <br> 
            <input class="somename" type="checkbox" id="4" value="4" name="phc"> PHC 
            <br> 
          </div> 
          <!-- <a href="prevotacao.html" class="btn btn-success" role="button">Create enterprise &raquo;</a> --> 
          <button type="reset" class="btn btn-warning" id="reset">Clean form &raquo;</button> 
        </form> 

       </div> 
      </div> 

Answer 1

3点：

1.アラートが失敗することがありますlist varが定義されていないためですあなたの指定されたスコープ（listは、グローバルまたは親関数で定義されていない限り）

2. $ .getJson（）APIがhttps://api.jquery.com/jQuery.getJSON/ここ

jQuery.getJSON(url [, data ] [, success ]); 

などに記載されて、 urlを送信するためのURLです dataは、送信するデータ（フォームデータ）です。 successはコールバック関数であり、サーバーからの正常な戻り時に実行されます。

最初にパラメータを修正して、(url, data, success)の順にしてから、success関数を完成させる必要があります。例えば

$.getJSON(url, data, function(data) { /* do something with your data */ }); 

getJSONので非同期であることに留意されたいです。これは、関数が呼び出され、応答が返されていなくてもコードが継続することを意味します。これは、成功関数が必ずしも期待どおりに実行されず、元の関数とは異なるスコープを持つことを意味します。