JSON+Ajax+JQuery实现无刷新

来源：互联网发布：矩阵论张绍飞课后答案编辑：程序博客网时间：2024/04/28 02:44

具体要求: 实现注册页面的信息 (jsp+servlet)

页面index.jsp

<script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript" src="js/index.js"></script><script type="text/javascript" src="js/xmlhttprequest.js"></script><script type="text/javascript" src="js/json2.js"></script></head><body><div id="show"></div>name:<input id="name" name="name" type="text" /><br /> pass:<input id="pwd" name="pwd" type="password" /><br /><input id="submit" type="button" value="JQuery验证" /><input id="submit1" type="button" value="XMLHttpRequest验证" onclick="MyAjax()" /></body>

(1)用Ajax+JSON来实现

xmlhttprequest.js

var xmlhttp;  //核心对象function MyAjax() {// 获取数据var name = document.getElementById("name").value;var pwd = document.getElementById("pwd").value;// 获取XMLHttpRequest对象if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else if (window.ActiveXObject) {var activxName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];for ( var i = 0; i < activexName.length; i++) {try {xmlhttp = new ActiveXObject(activexName[i]);break;} catch (e) {}}}xmlhttp.onreadystatechange = myback; // 回调函数var time = new Date();// 加上时间使得每次请求不一样var url = "my?name=" + name + "&pwd=" + pwd + "&time=" + time;// alert(url);xmlhttp.open("GET", url, true); // 以get方式发送请求xmlhttp.send(null); // 参数在url中，所以此处不需要参送}function myback() {if (xmlhttp.readyState == 4) {if (xmlhttp.status == 200) {// 以文本方式接收响应信息var txt = xmlhttp.responseText;// 使用json2.js中的parse方法将data转换成json格式var result = JSON.parse(txt);//结果显示这个层上document.getElementById("show").innerHTML = result.name + "==>"+ result.pwd;}}}

注意:这里使用了json2.js; 必须在官网去下载!

(2)用JQuery+JSON来实现

index.js

function fun() {// 封装成对象var student = {"name" : "","pwd" : ""};// 获得对应的值student.name = $("#name").val();student.pwd = $("#pwd").val();// 获得当前时间var time = new Date();//异步$.ajax({url:"my?time="+time,data:"name="+student.name+"&pwd="+student.pwd,type:"GET", dataType:"json",//请求页面返回的数据类型   success:function(data){  //data是由请求页面返回的数据 $("#show").html(data.name+"=>"+data.pwd);},error:function(data){$("#show").html("error");}});}$(function(){//show的字体颜色$("#show").css({"color":"blue","font-size":"36px"});/// 绑定按钮事件  $("#submit").bind("click",fun);});

servlet处理页面

public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();// 处理中文request.setCharacterEncoding("utf-8");//获得表单请求的数据String name = request.getParameter("name");String pwd = request.getParameter("pwd");//显示数据System.out.println("{\"name\":\""+ name +"\",\"pwd\":\""+ pwd +"\"}");// 返回JSON数据  \"是转移"out.println("{\"name\":\""+ name +"\",\"pwd\":\""+ pwd +"\"}");out.flush();out.close();}

效果页面

输入值之后,单击Jquery按钮

输入值之后,单击XMLHttpRequest按钮

总结: 可以用不同的方式来实现无刷新页面!

0 0