Several methods of ajax submission form in Jquery (get and post methods)-JS Tutorial-php.cn

Several methods of ajax submission form in Jquery (get and post methods)

高洛峰

Release： 2016-12-28 14:51:56

Original

1867 people have browsed it

In jquery, there are post and get methods for ajax submission form. When using the get method, we can directly use ajax to serialize the form $(form ID) serialize();. Now I will introduce two ways to submit form data. method. The $get method submits the form get() method through remote HTTP. Below I will introduce two methods for submitting form data.

$get method submits the form

get() method loads information through remote HTTP GET request

Format

$(selector).get(url,data,success(response,status,xhr),dataType)

Copy after login

Request test.php Web page, transmit 2 parameters, ignore the return value:

$.get("test.php", { name: "John", time: "2pm" } );

Copy after login

Display test.php return value (HTML or XML, depending on the return value):

$.get("test.php", function(data){
 alert("Data Loaded: " + data);
});

Copy after login

ajax serialization form

$.Form.serialize( NameValuePair )

Copy after login

Virtual a form and set the form control name and value.

Parameters

NameValuePair

Required. Set up virtual form controls. The parameter format is: { name1=value, name2=value2, ...}

Return value

The string after serialization of the virtual form, The format is: username=%E5%95%8A%E8%94%A1&password=123456

<form> 
<div><inputtype="text"name="a"value="1"id="a"/></div> 
<div><inputtype="text"name="b"value="2"id="b"/></div> 
<div><inputtype="hidden"name="c"value="3"id="c"/></div> 
<div> 
<textareaname="d"rows="8"cols="40">4</textarea> 
</div> 
<div><selectname="e"> 
<optionvalue="5"selected="selected">5</option> 
<optionvalue="6">6</option> 
<optionvalue="7">7</option> 
</select></div> 
<div> 
<inputtype="checkbox"name="f"value="8"id="f"/> 
</div> 
<div> 
<inputtype="submit"name="g"value="Submit"id="g"/> 
</div> 
</form> 
.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 <input>, <textarea> 以及 <select>。不过源码天空，选择 <form> 标签本身进行序列化一般更容易些： 
$(&#39;form&#39;).submit(function(){ 
alert($(this).serialize()); 
returnfalse; 
});

Copy after login

Output standard query string:

a=1&b;=2&c;=3&d; =4&e;=5

$POST method to submit the form

$.post

jQuery.post( url, [data], [callback], [type] ): Use POST method to make asynchronous requests

Parameters:

url (String): URL address to send the request.
data (Map): (Optional) Data to be sent to the server , expressed in the form of Key/value pairs.
callback (Function): (optional) Callback function when loading is successful (this method is called only when the return status of Response is success).

$.post("momsg.php",{"tel":$("#username").val()},function(data){
if(data==0)//0 成功 1 不成功 2 手机号码格式不对
  {   
   //  
  }  
});

Copy after login

Request to change the text of the div element through AJAX POST:

$("input").keyup(function(){
 txt=$("input").val();
 $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
  $("span").html(result);
 });
});

Copy after login

Example

<script type="text/javascript">
function adddata()
  {
   var typeName=$("#<%=this.typeName.ClientID%>").val();
   var msg=" not be empty";
   if(typeName=="")
   {
    if(msg!="")
     {
      alert(msg);
      return false;
     }
   }
   else
   {
     //显示进度条
     $("#loading").ajaxStart(function(){
     $(this).show();
     });
     //提交前触发的事件
     $("#msg").ajaxSend(function(request, settings){$(this).append("<li>Starting request at " + settings.url + "</li>");});
     //这里的countryid 可以动态从GridView里面取
     var countryid= $("#<%=this.drpCountry.ClientID%>").val();//获取下拉菜单值
     var countryname=format_get_name(countryid);//获取下拉菜单文本
     var typeName = $("#<%=this.typeName.ClientID%>").val();//获取txt为typeName的值
     var showTypeDesc = $("#<%=this.showTypeDesc.ClientID%>").val();//获取txt为showTypeDesc的值
      //调用Juqery Ajax
      $.ajax({
      type: "POST",
      url: "addNews.aspx",
      timeout: 20000,
      error: function(){alert(&#39;error&#39;);},
      data: "countryid="+countryid+"&countryname="+countryname+"&typeName="+typeName+"&showTypeDesc="+showTypeDesc,
      success: function(msg)
      {
      var text=msg.split(&#39;<&#39;);
      //当AJAX请求失败时添加一个被执行的方法
      $("#msg").ajaxError(function(request, settings){
      $(this).append("<li>Error requesting page " + settings.url + "</li>");
      });
      //当AJAX请求成功时添加一个被执行的方法
      $("#msg").ajaxSuccess(function(request, settings){
      $(this).append(text[0]);
      });
     //清空文本里面的值
      $("#<%=this.typeName.ClientID%>").val("");
      $("#<%=this.showTypeDesc.ClientID%>").val("");
      return false;
      }
      });
   }
  }
  //获取下拉菜单里面的文本内容
  function format_get_name(id)
  {
    var drp = $(&#39;<%=drpCountry.ClientID%>&#39;);
    for ( var i =0;i<drp.options.length;i++)
    {
      if ( drp.options[i].value == id )
      {
        return drp.options[i].text;
      }
    }
    return &#39;&#39;;
  }
</script>

Copy after login

The above content is the ajax submission form in Jquery shared by the editor of Script House. There are two methods (get and post methods), I hope it will be helpful to everyone.

For more related articles on several methods of ajax submission form in Jquery (get and post methods), please pay attention to the PHP Chinese website!