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="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>

你可能感兴趣的:(Ajax网络请求基本用法)