AJAX数据传输:(采用jQuery写的,要导入jQuery库类)
第一种传送方式:load(url,[data],[callback]);
url:提交给的页面。
data:提交给服务器的数据,采用json方式传送。如果没有数据传输,默认GET方式,有数据则为POST方式。
callback:是一个函数--->function(data,status,xhr){
data:是服务器传送到客户端的数据
status:传送的状态 success,error等。
xhr:是一个xml对象。
}
写一个简单的html文件如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>load方式</title> <Meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script language="JavaScript" src="../js/jquery-1.4.2.js"> </script> </head> <body> <form action="1.jsp" name="form1" id="form1"> <input type="text" name="username" id="username" > <br> <input type="text" name="psw" id="psw" > <br> <input type="button" id="b1" value="登陆"> </form> <div id="one"> </div> <h1></h1> </body> <script language="JavaScript"> $().ready(function(){ $("#b1").click(function(){ $("#one").load("1.jsp",{username:'hhtc',psw:'123'},function(data,xhr){ $("#one").text(data); }); }); }); </script> </html>
这里服务器我用.jsp代替
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% System.out.println(request.getMethod()); System.out.println(request.getParameter("username")); out.write("成功"); %>
调用方式是$.get("要转向的.jsp或者servlet",json格式的数据,xhr){
这里的参数跟load一样。
});
只要改一下<script type="text/javascript"></script>里面的代码
$.get("1.jsp",{username:'haha',password:'123'},xhr){ $("#one").text(data); });
第三种传输方式:post方式跟前面2中类似。
调用方式$.post
("要转向的.jsp或者servlet",json格式的数据,xhr){
这里的参数跟load,get一样。
});
注意的是:json格式的数据或者用$("#form1").serialize(),用$("#form1")..serialize(),适应于一个表单,有很多数据要提交时,采用这种方式非常好。
原文链接:https://www.f2er.com/ajax/164155.html