jquery ajax load

最新推荐文章于 2021-06-16 03:15:05 发布

chqm120

最新推荐文章于 2021-06-16 03:15:05 发布

阅读量439

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/chqm120/article/details/9798921

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

load01.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>ddd</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script language="JavaScript" src="../js/jquery.js">
        </script>
        <style type="text/css">
            div, span {
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Roman;
            }
            
            div.mini {
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family: Roman;
            }
            
            div.visible {
                display: none;
            }
        </style>
        <!--引入jquery的js库-->
    </head>
    <body>
        <form action="" name="form1" id="form1">
            <input type="text" name="username" id="username" value="zhang">
            <br>
            <input type="text" name="psw" id="psw" value="99999">
            <br>
            <input type="button" id="b1" value="登陆">
        </form>
        <div id="one">
        </div>
    </body>
    <script language="JavaScript">
     $(document).ready(function(){
	 	 $("#b1").click(function(){
			/*
			 * $("#one").load("load01.jsp",xxx,function(data,textStatus,xmlHttpRequest){});
			 *  * 载入远程HTML文件代码并插入至DOM中。
			 *  * 该方法不是jquery的全部函数,所以必须用对象调用
			 *  * 参数1:请求的url
			 *  * 参数2:发送到服务器的数据,格式:{key01:value01,key02:vlaue02}
			 *  * 参数3:回调函数function(data,textStatus,xmlHttpRequest)
			 *        * data:代表请求返回内容的 data,服务器端返回的内容
			 *        * textStatus:代表请求状态的 textStatus 对象,其值可能为: succuss, error, notmodify, timeout 4 种
			 *        * xmlHttpRequest对象
			 *        
			 *  * 如果没有向服务器传递参数:则此时的请求方法是get
			 *  * 如果向服务器传递参数:则此时的请求方法是post
			 *  
			 */
			var jsonObj={
				username:$("#username").val(),
				psw:$("#psw").val()
			}
			
			//$("#one").load("load01.jsp",jsonObj,function(data,textStatus,xmlHttpRequest){
			$("#one").load("load01.jsp",jsonObj,function(data,textStatus,xmlHttpRequest){
				 alert(data);
				 alert(textStatus);
				 alert("xmlHttpRequest是："+xmlHttpRequest+" xmlHttpRequest.readyState="+xmlHttpRequest.readyState+"xmlHttpRequest.status= "+xmlHttpRequest.status);
			});
			
		 });
	 }); 
    </script>
</html>

load01.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%
  System.out.println(request.getMethod());
  System.out.println("username= "+ request.getParameter("username"));
  System.out.println("psw= "+ request.getParameter("psw"));
  out.println("ninhao");
%>
<h1>xxxxx</h1>
<h2>ppppp</h2>