一聚教程网:一个值得你收藏的教程网站

热门教程

Jquery ajax提交表单几种方法

时间:2022-06-25 17:26:45 编辑:袖梨 来源:一聚教程网

在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$(‘#表单ID’).serialize()。

详细如下介绍:

一、$get方式提交表单

get() 方法通过远程 HTTP GET 请求载入信息

格式

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

实例

使用 AJAX 的 GET 请求来改变 div 元素的文本:

$.get('login.php', {
    id      : 'Robin',
    password: '123456',
    gate    : 'index'
   }, function(data, status) {
    //data为返回对象,status为请求的状态
    alert(data);
    //此时假设服务器脚本会返回一段文字"你好,Robin!",
 那么浏览器就会弹出对话框显示该段文字
    alert(status);
    //结果为success, error等等,但这里是成功时才能运行的函数
   });

显示 test.php 返回值(HTML 或 XML,取决于返回值):

ajax 序列化表单

$.Form.serialize( NameValuePair )

虚拟一个表单,并设置表单控件名与值。

参数
NameValuePair

必选项。设置虚拟的表单控件。该参数形式为:{ name1=value, name2=value2, ……}
返回值

虚拟表单序列化后的字符串,其格式如:username=%E5%95%8A%E8%94%A1&password=123456

$.post('your url', $("form").serialize(), function(data) {
        // your code
    }
});

$.get('your url', $("form").serialize(), function(data) {
        // your code
    }
});

$.getJSON('your url', $("form").serialize(), function(data) {
        // your code
    }
});

二、$POST方式提交表单

$.post

jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求
参数:

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)

$.post("data.php",$("#firstName.val()"),function(data){
 
$("#postResponse").html(data.name);
 
},"json"//设置了获取数据的类型,所以得到的数据格式为json类型的
 
);

ajax

$.ajax(opiton)
 
$.ajax({
 
url: "ajax/ajax_selectPicType.aspx",
 
data:{Full:"fu"},
 
type: "POST",
 
dataType:'json',
 
success:CallBack,
 
error:function(er){
 
BackErr(er);}
 
});
 

四,$.getJSON(url,[data],[callback])


 $.getJSON("data.php",$("#firstName.val()"),function(jsonData){
 
$("#getJSONResponse").html(jsonData.id);}//无需设置,直接获取的数据类型为json,
 所以调用时需要使用jsonData.id方式
 
);

热门栏目