jQuery中ajax 中页面与表单的几种写法详解与服务器状态码解析
1. 手工填写所有数据
在页面中对应的位置写onclick函数，例如函数的名字为hello
function hello(id){
$.ajax({
url: '/hello',
type:'get',
datatype:'jason',
data:{
'id':id,
},
success:function(ret){
console.log(ret)
},
error:function(){
'请求错误'
}
})
} method 可为get，也可为post
2. 用URL来解析访问方式
即URL底下的视图函数的访问方式
jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求
参数：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
$.post("url",{data},function(result){},"json"); 如果方式为get,则将post改为get
$.get("url",function(data){},"json");
例如：
$.get('/user/auths/', function (msg) {
if (msg.code == '200') {
if (msg.data.id_name) {
$(".auth-warn").hide();
$('#houses-list').show();
} else {
$(".auth-warn").show();
$('#houses-list').hide();
}
}
});3. 表单请求的提交
- 第一种方法，使用ajaxSubmit
$(button).submit(function () {
$(this).ajaxSubmit({
url:'URL',
type:'POST',
dataType:'json',
success:function (data) {
}，
error：function(data){
}
});
})
例如：
$('#form-house-image').submit(function () {
$(this).ajaxSubmit({
url:'/house/house_images/',
type:'POST',
dataType:'json',
success:function (msg) {
if(msg.code=='200'){
var img_html = '<img src ="/static/'+msg.image_url+'">';
$('.house-image-cons').append(img_html)
}
},
error:function(msg){
alert('请求失败')
}
});
return false;
});type可为get或者post
- 第二种方法,,使用serialize()
$(button).submit(function () {
$.post('url',$(this).serialize(),function(msg){
});
})
或者
$(button).submit(function () {
$.get('url',$(this).serialize(),function(msg){
});
})
例如：
$('#form-house-info').submit(function () {
// serialize将model房屋信息全部拿到
$.post('/house/newhouse/',$(this).serialize(),function(msg){
if (msg.code == '200') {
// 填完信息后，显示上传房源图片页面
$('#form-house-info').hide();
$('#form-house-image').show();
$('#house-id').val(msg.house_id)
}
});
return false;
});- 第三种方式，手写填写数据
$('buttton').submit(function (e) {
$.ajax({
url:'url',
type:'PATCH',
dataType:'json',
data:{'data':data},
success:function(data) {
},
error:function (data) {
}
});
});
例如：
$('#form-name').submit(function (e) {
$('.error-msg').hide();
e.preventDefault();
var name = $('#user-name').val();
$.ajax({
url:'/user/prname/',
type:'PATCH',
dataType:'json',
data:{'name':name},
success:function(data) {
if(data.code == '1009'){
$('.error-msg').html('<i class="fa fa-exclamation-circle"></i>'+data.msg);
$('.error-msg').show();
}else if(data.code == '200'){
showSuccessMsg();
}
},
error:function (data) {
alert("fail");
}
});
});服务器常用的状态码及其对应的含义如下：
- 200：服务器响应正常。
- 304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
- 400：无法找到请求的资源。
- 401：访问资源的权限不够。
- 403：没有权限访问资源。
- 404：需要访问的资源不存在。
- 405：需要访问的资源被禁止。
- 407：访问的资源需要代理身份验证。
- 414：请求的URL太长。
- 500：服务器内部错误。
补全状态码避免再去搜:
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本