Ajax网络请求基本用法

来源：互联网发布：编程语言应用领域编辑：程序博客网时间：2024/05/16 06:57
<!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>
0 0