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方式

$.get(
    "$(_path)/service/adve/upload",
    {key:value,key:value,key:value},
    function(data){
        console.log(data)
    }
)

 

post方式

$.post(
     "$(_path)/service/adve/upload",
            {key:value,key:value,key:value},
            function(data){
                console.log(data)
            }
)

 

Ajax方式(常用)

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

以上只针对普通表单上传

---

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

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

 

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

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

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

 

 //方式二
var df = new FormData();
//添加一项要提交的内容，append
df.append("name",$('#adveName').val());
//取出文件真正的流信息
df.append("file",$('#adveFile')[0].files[0]);

$.ajax({
    url:"${_path }/serviceman/adve/upload",
    type:"POST",
    // 方式一，只能上传文件流信息.
    // data:new  FormData($("#advert_file")[0]),//改用 DOM 表单对象作为提交数据
    data:df, //直接传递 表单对象
    ......
});