- 首先先增加開(kāi)始,先上靜態(tài)頁(yè)面
學(xué)號(hào)：<input type="text" value="" id="userid"/><br>
姓名：<input type="text" value="" id="name"/><br>
性別：男：<input type="radio" name="sex" value="男">女：<input type="radio"
name="sex" value="女"><br>
年齡：<select id="age">
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select><br>
<input type="button" value="添加" id="btn_1" onclick="add()"/>
<br>
點(diǎn)擊添加按鈕調(diào)用add方法發(fā)送一個(gè)ajax請(qǐng)求如下：
function add() {
var userid = $("#userid").val();
var name = $("#name").val();
var sex = $('input[name="sex"]:checked').val();
var age = $("#age").val();
var data={
"userid":userid,
"name":name,
"sex":sex,
"age":age
}
$.ajax({
type : "post",
url : "demo",//這是你要請(qǐng)求的接口網(wǎng)址，之后所有接口都是隨便寫(xiě)的接口
data : data,//傳輸?shù)臄?shù)據(jù)剧浸，當(dāng)然傳輸?shù)臄?shù)據(jù)也可以在url鏈接后面打個(gè)問(wèn)號(hào)傳
cache : true, // 表示瀏覽器是否緩存被請(qǐng)求頁(yè)面,默認(rèn)是 true
async : true, // 異步锹引，默認(rèn)開(kāi)啟，也就是$.ajax后面的代碼是不是跟$.ajax里面的代碼一起執(zhí)行
dataType:"json", // 返回瀏覽器的數(shù)據(jù)類(lèi)型唆香，指定是json格式嫌变，前端這里才可以解析json數(shù)據(jù)
success: function (data){
if(data.code == 200){
alert("插入成功了");
}else{
alert(data.message);
}
},
error:function () {
alert('出錯(cuò)了');
}
});
}
2.到此增加部分就完成了，接下來(lái)是查詢(xún)部分,話(huà)不多說(shuō)直接上代碼：
學(xué)號(hào)：<input type="text" value="" id="userid_query"/>
<input type="button" value="查詢(xún)" id="bt2" onclick="query()"/>
<table id="queryResult">
<tr>
<td>學(xué)號(hào)</td>
<td>姓名</td>
<td>性別</td>
<td>年齡</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
點(diǎn)擊查詢(xún)按鈕調(diào)用query方法發(fā)送一個(gè)ajax請(qǐng)求如下：
function query() {
var userid_query = $("#userid_query").val();
var str = ["學(xué)號(hào)","姓名","性別","年齡"];
$.ajax({
type : "post",
url : "demoQuery",
data : {
"userid_query": userid_query
},
cache : true,
async : true,
dataType:"json",
success: function (data){
//data = $.parseJSON(data);
var j = 0;
var x = 1;
for(var p in data){//遍歷json對(duì)象的每個(gè)key/value對(duì),p為key
console.log(data[p]);
if(j == 4) {
j = 0;
x++;
}
$("#queryResult tr:eq("+x+") td:eq("+j+")").html(data[p]);
console.log(data[p]);
j++;
}
},
error:function () {
alert('出錯(cuò)了');
}
});
}
3.接下來(lái)是我們的刪除部分了躬它，let,go:
//根據(jù)學(xué)號(hào)刪除
學(xué)號(hào)：<input type="text" value="" id="userid_del"/>
<input type="button" value="刪除" id="bt3" onclick="del()"/>
<br>
點(diǎn)擊刪除按鈕調(diào)用del方法發(fā)送一個(gè)ajax請(qǐng)求如下：
function del() {
var userid = $("#userid_del").val();
$.ajax({
type : "post",
url : "demoDelete",
data : {
"userid":userid
},
cache : true,
async : true,
dataType:"json",
success: function (data){
if(data.code == 200){
alert("刪除成功了");
}else{
alert(data.message);
}
},
error:function () {
alert('出錯(cuò)了’);
}
});
}
4.終于要結(jié)束了腾啥，最后一個(gè)修改功能了，直接上代碼：
學(xué)號(hào)：<input type="text" value="" id="userid_alter"/><br>
姓名：<input type="text" value="" id="name_alter"/><br>
性別：男：<input type="radio" name="sex_alter" value="男">女：<input type="radio" name="sex_alter" value="女"><br>
年齡：<select id="age_alter">
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select><br>
<input type="button" value="修改" id="bt4" onclick="alter()"/>
<script>
function alter() {
var userid = $("#userid_alter").val();
var name = $("#name_alter").val();
var sex = $('input[name="sex_alter"]:checked').val();
var age = $("#age_alter").val();
var data={
"userid":userid,
"name":name,
"sex":sex,
"age":age
}
$.ajax({
type : "post",
url : "demoAlter",
data : data,
cache : true,
async : true,
dataType:"json",
success: function (data){
if(data.code == 200){
alert("修改成功了");
}else{
alert(data.message);
}
},
error:function () {
alert('出錯(cuò)了');
}
});
}
</script>
最后附上截圖：
image.png
到此就結(jié)束了冯吓。喜歡給些關(guān)注啊倘待。以后會(huì)經(jīng)常更新！
