2020年8月31日 星期一

ajax 使用form格式post 資料

Html部分:
	
<span class="pln">
  </span><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myForm"</span><span class="pln"> </span><span class="atn">action</span><span class="pun">=</span><span class="atv">"getPost.php"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'col-12 col-md-5 mx-auto'</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"data1"</span><span class="tag">&gt;</span><span class="pln">Email:</span><span class="tag">&lt;/label&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"email"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"data1"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"data1"</span><span class="pln"> </span><span class="atn">aria-describedby</span><span class="pun">=</span><span class="atv">"emailHelp"</span><span class="pln"> </span><span class="atn">autocomplete</span><span class="pln"> </span><span class="atn">required</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;small</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"emailHelp"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-text text-muted"</span><span class="tag">&gt;</span><span class="pln">請輸入E-mail</span><span class="tag">&lt;/small&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"data2"</span><span class="tag">&gt;</span><span class="pln">Password</span><span class="tag">&lt;/label&gt;</span><span class="pln">
      </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"password"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"data2"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"data2"</span><span class="pln"> </span><span class="atn">autocomplete</span><span class="pln"> </span><span class="atn">required</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="tag">&gt;</span><span class="pln">Submit</span><span class="tag">&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;/form&gt;</span><span class="pln">
</span>


Jquery 部分:

$(function(){

      $( "#myForm" ).on( "submit", function(event) {

        event.preventDefault();        
        var form = $(this);
        var url = form.attr('action');

        $.ajax({
          type: "POST",
          url: url,
          data: form.serialize(), // 把form內的物件序列化.
          success: function(data)
          {
            //alert(data);

            if(data==1){
              alert('成功');
              //window.location.href='index.php';
            }else if(data == 0){
              alert('失敗');
              return false; 
            };

          }
        });       
      });

})

接收的PHP這一端,就直接以$_POST[""]接收傳過來的各個值

相關:不使用form的方式,直接用id或class讀取input的vlaue值post

沒有留言: