Jquery使用Ajax发送异步请求,模拟前后台接口开发模式

AJax上传各种表单

1.普通表单 (input) enctype="application/x-www-form-urlencoded"

<form action="" method="post" enctype="application/x-www-form-urlencoded">
    <input type="text" name="username" />
    <input type="text" name="user" />
    <input type="text" name="pswd" />
</form

使用Jquery显示发送Ajax请求

get方式

1 $.get(
2     "$(_path)/service/adve/upload",
3     {key:value,key:value,key:value},
4     function(data){
5         console.log(data)
6     }
7 )

 

post方式

1 $.post(
2      "$(_path)/service/adve/upload",
3             {key:value,key:value,key:value},
4             function(data){
5                 console.log(data)
6             }
7 )

 

Ajax方式(常用)

 1 $.ajax(
 2     url:"",                     // 请求路径
 3     type:"POST"           //请求方式
 4     dataType:"json"     //指定返回的类型
 5     data:{},                   // 传递的数据
 6     success:function(result){     //成功返回的数据
 7         console.log(result);
 8     },
 9     error:function(error){               // 失败返回的信息
10     }
11 )

以上只针对普通表单上传


2.多部件上传表单 (文件项) entype="multipart/form-data

 1 $.ajax({
 2     url:"${_path }/serviceman/adve/upload",
 3     type:"POST",
 4     // $("#advert_file")[0] 为表单中文件上传项
 5     data:new  FormData($("#advert_file")[0]),//改用 DOM 表单对象作为提交数据
 6     processData:false,//不适用默认处理方法,直接提交
 7     contentType:false,//不适用默认的内容类型
 8     success:function(result){
 9         console.log(result);
10     },
11     error:function(error){
12         console.log(‘error‘);
13     }
14 });

 

使用 FormData()进行部分数据提交文件上传表单,一次性提交所有项, 使用 formData包装为表单对象 : new FromData($("#assd")[0]) ;

*//注意必须为 DOM元素 *

FormData():自定义内容表单对象提交.

 

 1  //方式二
 2 var df = new FormData();
 3 //添加一项要提交的内容,append
 4 df.append("name",$(‘#adveName‘).val());
 5 //取出文件真正的流信息
 6 df.append("file",$(‘#adveFile‘)[0].files[0]);
 7 
 8 $.ajax({
 9     url:"${_path }/serviceman/adve/upload",
10     type:"POST",
11     // 方式一,只能上传文件流信息.
12     // data:new  FormData($("#advert_file")[0]),//改用 DOM 表单对象作为提交数据
13     data:df, //直接传递 表单对象
14     ......
15 });

 

Jquery使用Ajax发送异步请求,模拟前后台接口开发模式

上一篇:Jenkins Pipeline 部署 Kubernetes 应用


下一篇:web之js(一)