jq+json+ajax demo_jq ajax json-CSDN博客

本文链接：https://blog.csdn.net/u011011025/article/details/45718077

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax demo</title>
</head>
<body>
<h1>请输入查询编号</h1>
<input type=text id="keyword">
<input type="button" id="search" value="查询">
<p id="searchResult"></p>
<h1>请输入以下信息</h1>
<lable>姓名：</lable><input type="text" id="name">
<lable>班级：</lable><input type="text" id="aclass">
<lable>年龄</lable>
<select id="sex">
	<option value="男">男</option>
	<option value="女">女</option>
</select>
<input type="button" id="create" value="提交">
<p id="createResult"></p>

<script src="jquery-1.11.2.min.js"></script>
<script>
	
	$(document).ready(function(){
		$('#search').click(function(){
			$.ajax({
				type:"GET",
				url:"index.php?number="+$('#keyword').val(),
				dataType:"json",
				error:function(jqXHR){
					alert("发生错误"+jqXHR.status);
				},
				success:function(data){
					if(data.success){
						$('#searchResult').html(data.msg);
					}else{
						$('#searchResult').html("参数错误"+data.msg);
					}
				}
			});
		});
		
		$('#create').click(function(){
			$.ajax({
				type:"POST",
				url:"index.php",
				data:{
					name:$('#name').val(),
					number:$('#keyword').val(),
					aclass:$('#aclass').val(),
					sex:$('#sex').val()
				},
				success:function(data){
					if(data.success){
						$('#createResult').html(data.msg);
					}else{
						$('#createResult').html("出错：" + data.msg);
					}
				},
				error:function(jqXHR){
					alert(jqXHR);
				}
			});
		});
	});
</script>
</body>
</html>

后台php页面跟上一篇的一样，没变。