Ajax网络请求基本用法

最新推荐文章于 2024-01-06 15:35:25 发布

Arnly

最新推荐文章于 2024-01-06 15:35:25 发布

阅读量1.2k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Arnly/article/details/70854422

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <meta charset="UTF-8">
    <title>网络请求Dome</title>
</head>
<body>
<h1>员工查询</h1>
<label>请输入员工编号:</label>
<input type="text" id="keywords">
<button id="search">查询</button>
<p id="searchResult"></p>

<h1>员工新建</h1>
<label>请输入员工姓名:</label>
<input type="text" id="name"><br>
<label>请输入员工编号:</label>
<input type="text" id="number"><br>
<label>请输入员工性别:</label>
<select id="sex">
    <option value="man">男</option>
    <option value="woman">女</option>
</select><br>
<label>请输入员工职位:</label>
<input type="text" id="position"><br>
<button id="save">保存</button><br>
<p id="saveResult"></p>
<script scr="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script>
//jQuery中 Ajax普通请求
$(document).ready(function() {
    $("#search").click(function() {
        $.ajax({
            url: 'url',
            type: 'default GET (Other values: POST)',
            dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
            data: {param1: 'value1'},
        })
        .done(function() {
            console.log("success");
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
        j
    });
});
//javascript中 Ajax普通请求
document.getElementById("search").onclick= function() {
    //新建一个请求
    var request = new XMLHttpRequest(); 
    //设置请求请求方式，参数，
    request.option("GET","url?number="+document.getElementById("keywords").value);
    //发送请求
    request.send();
    //获取响应结果
    request.onreadystatechange = function() {
        if (request.readyState ===4) {
            if (request.status ===200) {
                var data = JSON.parse(request.responseText);
                if (data.success) {
                    //请求成功，刷新页面
                   document.getElementById("saveResult").innerHTML=data.msg;
                } else {
                     document.getElementById("saveResult").innerHTML="发生错误:"+data.msg;
                } 

            } else {
                alert("发生错误:"+request.status);
            }
        }
    }

}

document.getElementById("save").onclick= function() {
    //新建一个Ajax请求
    var request = new XMLHttpRequest(); 
    //设置请求请求方式，参数，
    request.option("POST","url");

    //构造请求参数
    var data = "name="+document.getElementById("name").value
              +"number="+document.getElementById("number").value
              +"sex="+document.getElementById("sex").value
              +"position="+document.getElementById("position").value;
    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
     //发送请求
    request.send(data);
    //获取响应结果
    request.onreadystatechange = function() {
        if (request.readyState ===4) {
            if (request.status ===200) {

                var data = JSON.parse(request.responseText);
                if (data.success) {
                    //请求成功，刷新页面
                   document.getElementById("searchResult").innerHTML=data.msg;
                } else {
                     document.getElementById("searchResult").innerHTML="发生错误:"+data.msg;
                } 
            } else {
                alert("发生错误:"+request.status);
            }
        }
    ｝
}

</script>

</body>
</html>

Arnly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax网络请求基本用法

<!DOCTYPE html><html lang="Zh-cn"><head> <meta charset="UTF-8"> <title>网络请求Dome</title></head><body><h1>员工查询</h1><label>请输入员工编号:</label><input type="text" id="keywords"><button id="sear
复制链接

扫一扫