jq+json+ajax demo

来源：互联网发布：维多利亚贝克汉姆知乎编辑：程序博客网时间：2024/05/01 20:25

<!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页面跟上一篇的一样，没变。

0 0