AJAX的几种数据传输

最新推荐文章于 2025-03-12 20:13:36 发布

在风雨中奔跑

最新推荐文章于 2025-03-12 20:13:36 发布

阅读量5.7k

点赞数

分类专栏： JAVAWEB

本文链接：https://blog.youkuaiyun.com/zxdfc/article/details/41075119

版权

JAVAWEB 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了使用jQuery进行AJAX数据传输的两种方式：load方法和post方法。load方法适用于简单数据提交，而post方法适用于POST方式的数据传输，特别是大量数据提交时可以使用表单序列化的方式。示例代码展示了如何在HTML文件中调用这些方法，并解释了各个参数的含义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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,status,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跟load非常类似。
调用方式是$.get("要转向的.jsp或者servlet",json格式的数据,function(data,status,xhr){

这里的参数跟load一样。

})；

只要改一下<script type="text/javascript"></script>里面的代码

$.get("1.jsp",{username:'haha',password:'123'},function(data,status,xhr){
					    $("#one").text(data);
				});

第三种传输方式：post方式跟前面2中类似。

调用方式$.post

("要转向的.jsp或者servlet",json格式的数据,function(data,status,xhr){

这里的参数跟load,get一样。

})；

注意的是：json格式的数据或者用$("#form1").serialize(),用$("#form1")..serialize(),适应于一个表单，有很多数据要提交时，采用这种方式非常好。