jquery $.ajax()实现Post数据到服务端

最新推荐文章于 2025-08-05 18:24:59 发布

转载最新推荐文章于 2025-08-05 18:24:59 发布 · 409 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hyw1213/p/4936792.html

文章标签：

#javascript #数据库 #json #ViewUI

本文详细介绍了在jQuery中使用AJAX的方式，包括$.post、$.get及$.ajax方法的应用场景与参数说明，并提供了多个代码实例，如带JSON数据的请求、序列化表单数据以及拼接URL或data参数的异步请求。

在jquery 中使用ajax方式进行异步调用有3种方式：$.post、$.get、$.ajax.

其中$.post、$.get是封装的$.ajax方法。处理一些较为简单的ajax请求，参数少的情况。

如果遇到复杂数据传输，或者对传输配置参数需要定义，就需要$.ajax了。

一、$.ajax的一般格式

$.ajax({

type: 'POST',

url: url ,

data: data ,

success: success ,

dataType: dataType

});

二、$.ajax的参数描述

参数描述


url	必需。规定把请求发送到哪个 URL。
data	可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。

四、代码实例。

1.$.ajax带json数据的异步请求

       <span style=
       "font-size: 14px; font-family: 微软雅黑, 'Microsoft YaHei'; "
       >    
       var 
       inputMac = $(
       "#inputMac"
       ).val();<br>    
       var 
       selectType = $(
       "#selectType"
       ).val();<br>    
       var 
       selectStatus = $(
       "#selectStatus"
       ).val(); <br>  $.ajax({<br>        type: 
       "post"
       ,<br>        dataType: 
       'json'
       ,<br>        url: AjaxUrl,<br>        data: {<br>            mac: inputMac,<br>            status: selectStatus,<br>            type: selectType<br>        },<br>        success: 
       function 
       (data, textStatus) {<br>            
       if 
       (data != 
       null
       ) {<br>                 <br>                
       var 
       ap = eval(data);<br>                
       if 
       (ap != 
       null 
       && ap!=
       "undefined" 
       && ap.Id>0) {<br>                    
       //window.location.href = 'index.aspx';<br>                    alert("添加成功。"); return;<br>                }<br>                else {<br>                    alert("添加失败，请检查输入是否正确。"); return;<br>                }<br>            }<br>        },<br>        complete: function (XMLHttpRequest, textStatus) {<br><br>        },<br>        error: function (e) {<br>            alert("添加失败，请检查输入是否正确。"); return;<br>        }<br>    });<br></span>
      

        
      

        
      

        
      

2.$.ajax序列化表格内容为字符串的异步请求

使用方法是： var formParam = $("#form1").serialize();//序列化表格内容为字符串。

将formParam作为data传递给服务器。

serialize() 与 serializeArray()

serialize() : 序列表表格内容为字符串。

serializeArray() : 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

 var formParam = $( "#form1" ).serialize();

//序列化表格内容为字符串  <br>    $.ajax({  <br>        type:'post',      <br>        url:'Notice_noTipsNotice',  <br>        data:formParam,  <br>        cache:false,  <br>        dataType:'json',  <br>        success:function(data){  <br>        }  <br>    });<br></span>

3.$.ajax拼接url的异步请求

 var yz=$.ajax({ type: 'post' , url: 'validatePwd2_checkPwd2?password2=' +password2, data:{}, cache: false , dataType: 'json' , success: function (data){  if ( data.msg == "false" )

//服务器返回false，就将validatePassword2的值改为pwd2Error，这是异步，需要考虑返回时间  <br>          {  <br>               textPassword2.html("<font color='red'>业务密码不正确！</font>");  <br>               $("#validatePassword2").val("pwd2Error");  <br>               checkPassword2 = false;  <br>               return;  <br>           }  <br>      },  <br>      error:function(){}  <br>});<br></span>

4.$.ajax拼接data的异步请求

$.ajax({ url: '<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action' , type: 'post' , data: 'merName=' +values, async : false ,

//默认为true 异步   <br>    error:function(){   <br>       alert('error');   <br>    },   <br>    success:function(data){   <br>       $("#"+divs).html(data);   <br>    }<br>});<br></span>

转载于:https://www.cnblogs.com/hyw1213/p/4936792.html