前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery 中的 Ajax 方法(节选)

jQuery 中的 Ajax 方法(节选)

作者头像
Leophen
发布2019-08-23 22:53:02
8010
发布2019-08-23 22:53:02
举报
文章被收录于专栏:Web前端开发Web前端开发

$.ajax()

基本用法:

代码语言:javascript
复制
$.ajax({
    url: url,                      // 地址
    data: data,                    // 参数
    type: 'POST',                  // 提交方式 可以选择 post/get 推荐 post
    async: false,                  // 同步异步
    dataType: 'json',              // 返回数据类型
    success:function(data){
        accidentList = data.list;  // 这里可以直接取 data 里面的数据了,因为设置返回值为 json 方式
    }
});

举个例子:

代码语言:javascript
复制
document.getElementById("search").onclick = function() { 
    var request = new XMLHttpRequest();
    request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
    request.send();
    request.onreadystatechange = function() {
        if (request.readyState===4) {
            if (request.status===200) { 
                document.getElementById("searchResult").innerHTML = request.responseText;
            } else {
                alert("发生错误:" + request.status);
            }
        } 
    }
}

document.getElementById("save").onclick = function() { 
    var request = new XMLHttpRequest();
    request.open("POST", "server.php");
    var data = "name=" + document.getElementById("staffName").value 
                      + "&number=" + document.getElementById("staffNumber").value 
                      + "&sex=" + document.getElementById("staffSex").value 
                      + "&job=" + document.getElementById("staffJob").value;
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.send(data);
    request.onreadystatechange = function() {
        if (request.readyState===4) {
            if (request.status===200) { 
                document.getElementById("createResult").innerHTML = request.responseText;
            } else {
                alert("发生错误:" + request.status);
            }
        } 
    }
}

用 jQuery 改写如下:

代码语言:javascript
复制
$(document).ready(function(){ 
    $("#search").click(function(){ 
        $.ajax({ 
            type: "GET",     
            url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=" + $("#keyword").val(),
            dataType: "json",
            success: function(data) {
                if (data.success) { 
                    $("#searchResult").html(data.msg);
                } else {
                    $("#searchResult").html("出现错误:" + data.msg);
                }  
            },
            error: function(jqXHR){     
               alert("发生错误:" + jqXHR.status);  
            },     
        });
    });
    
    $("#save").click(function(){ 
        $.ajax({ 
            type: "POST",     
            url: "serverjson.php",
            data: {
                name: $("#staffName").val(), 
                number: $("#staffNumber").val(), 
                sex: $("#staffSex").val(), 
                job: $("#staffJob").val()
            },
            dataType: "json",
            success: function(data){
                if (data.success) { 
                    $("#createResult").html(data.msg);
                } else {
                    $("#createResult").html("出现错误:" + data.msg);
                }  
            },
            error: function(jqXHR){     
               alert("发生错误:" + jqXHR.status);  
            },     
        });
    });
});
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-07-18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • $.ajax()
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档