ajax

最新推荐文章于 2025-03-16 10:00:00 发布

原创最新推荐文章于 2025-03-16 10:00:00 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

Http请求–网络知识

请求
响应

ajax–Asynchronous JavaScript and XML

传输数据类型：json xml
应用场景：搜索框联想功能，局部刷新实现分页效果，表单数据校验（重名，非空等等）
XMLHttpRequest对象
图片来源https://www.zhihu.com/search?type=content&q=ajax%E5%89%8D%E5%90%8E%E7%AB%AF%E4%BA%A4%E4%BA%92%E2%80%98%E2%80%99

JQuery实现ajax

ajax 属性

data：String类型，发送到服务器的数据
图片来源
dataType：xml，html，json，text，script，jsonp 这是希望服务器返回的数据类型 json
contentType：发送给服务器信息的编码类型这是告诉服务器发送的数据类型 application/json
complete：请求完成（不论成败）的回调函数
password/username：响应HTTP访问认证请求的密码/用户名
success：请求成功的回调函数
type：GET（默认），POST
url：请求地址

$.ajax

$("#imgOne").change(function () {
        var formData = new FormData();
        formData.append("pic", document.getElementById("imgOne").files[0]);
        $.ajax({
            type: "POST", // 请求方式
            url: "http://www.meishi.com/uploadImg", // 请求路径
            data: formData, //请求参数-前端传送到后端的数据内容
            async: true, // 是否异步
            processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            contentType: false, 
            success:function (data) { //响应成功后的回调函数
                if(data.error==0){
                    alert(data.error);
                    alert(data.url);
                    document.getElementById("imgInput").value=data.url;
                    document.getElementById("photo").src=data.url;
                }
            }//回调函数
        });//ajax
    });

简单方式取代$.ajax

$.get(url,[data],callback,type)
$.post(url, [data], [callback], [type])
serialize():将表单内容序列化成一个字符串。

function submitForm(){
 alert($("#itemAddForm").serialize());
 $.post( "/food/addFood",$("#itemAddForm").serialize(), function(data){if(data.status == 200){alert("新增商品成功");}});
 }