https://blog.csdn.net/bymyself11/article/details/52118227 用户登录用表单提交和ajax提交的问题
http://www.jb51.net/article/128684.htm jQuery实现所有验证通过方可提交的表单验证
https://www.cnblogs.com/web-fusheng/p/6706090.html # [ajax 提交 注册表单 到MySQL数据库]
https://blog.csdn.net/xiaolulululululu/article/details/78641124 FORM表单请求和AJAX请求使用和适用场景
http://www.jb51.net/article/45182.htm JQuery处理json与ajax返回JSON实例代码
https://www.cnblogs.com/Gabriel-Wei/p/6002223.html 原生js处理json数组
https://www.cnblogs.com/GreenLeaves/p/5640842.html each说明
//遍历处理data，可以是数组、DOM、json等，取决于直接给定或者ajax返回的类型 function (index, value)中index是当前元素的位置，value是值。
// each处理一维数组
var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
alert(i);
alert(val);
});
// 处理json数据，例如ajax的返回值
var obj = { one:1, two:2, three:3};
$.each(obj, function(key, val) {
alert(key);
alert(val);
});
获取后台json数组
$(document).ready(function() {
$.ajax({
type: "get",
url: "http://www.rvhqs.cn/api/currency",
dataType: "json",
success: function (data) {
console.log(data);
for (var i = 0; i < data.length; i++) { //循环后台传过来的Json数组
$("#createResult").append("<p> 名字:"+ data[i].name+ " <em>id:"+data[i].id+"</em></p>");
}
/* $.each(data, function (index, obj) {
$("#searchResult").append(index + "、" + obj.name+" "+obj.rate+"<br>");
});*/
},
error: function(jqXHR){
alert("发生错误：" + jqXHR.status);
},
})
});
获取字段
$(document).ready(function() {
$("#search").click(function () {
$.ajax({
type: "GET",
url: "http://www.rvhqs.cn/api/currency/?" + $("#id").val(),
dataType: "json",
success: function (data) {
console.log(data);
$("#searchResult").html(data[0].name);
},
error: function(jqXHR){
alert("发生错误：" + jqXHR.status);
},
})
})
})
image.png
eval：将字符串转换成js代码，将字符串转换成object
image.png
调json数据jQuery
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
font-size: 28px;
line-height:1.7;
}
</style>
</head>
<body>
<h1>员工查询</h1>
<label>请输入员工编号：</label>
<input type="text" id="keyword" />
<button id="search">查询</button>
<p id="searchResult"></p>
<h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName" /><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber" /><br>
<label>请选择员工性别：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script>
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type: "GET",
url: "http://www.rvhqs.cn/api/currency/" + $("#id").val(),
dataType: "json",
success: function(data) {
console.log(data);
$("#searchResult").html(data);
},
/*if (data.success) {
$("#searchResult").html(data.msg);
} else {
$("#searchResult").html("出现错误：" + data.msg);
} */
/* console.log(data);
$("#searchResult").html(data[0].name);
/!* alert(typeof(data))如果是字符串转换成object才能使用
*!/
/!* for(var i=0;i<data.length;i++){
$("#searchResult").html(data[i].name);
}*!/*/
error: function(jqXHR){
alert("发生错误：" + jqXHR.status);
},
});
})
})
$("#save").click(function(){
$.ajax({
type: "POST",
url: "serverjson.php",
/* data: $("from").serialize(),*/
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);
} */
$("#createResult").html(data);
},
error: function(jqXHR){
alert("发生错误：" + jqXHR.status);
},
});
});
});
</script>
</body>
</html>
调json数据js原生
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
font-size: 28px;
line-height:1.7;
}
</style>
</head>
<body>
<h1>员工查询</h1>
<label>请输入员工编号：</label>
<input type="text" id="keyword" />
<button id="search">查询</button>
<p id="searchResult"></p>
<h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName" /><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber" /><br>
<label>请选择员工性别：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>
<script>
document.getElementById("search").onclick = function() {
var request = new XMLHttpRequest();
request.open("GET", "serverjson.php?number=" + document.getElementById("keyword").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("searchResult").innerHTML = data.msg;
} else {
document.getElementById("searchResult").innerHTML = "出现错误：" + data.msg;
}
} else {
alert("发生错误：" + request.status);
}
}
}
}
document.getElementById("save").onclick = function() {
var request = new XMLHttpRequest();
request.open("POST", "serverjson.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) {
var data = JSON.parse(request.responseText);
if (data.success) {
document.getElementById("createResult").innerHTML = data.msg;
} else {
document.getElementById("createResult").innerHTML = "出现错误：" + data.msg;
}
} else {
alert("发生错误：" + request.status);
}
}
}
}
</script>
</body>
</html>
网友评论