• 黑马day18 jquery高级特性&Ajax的load方法


    介绍jquery中的load方法:

    (1).前面没有jquery.修饰,能够判断出他是一个普通的非全局函数(也就是说是一个局部函数):$.,$().,jquery.等修饰的就是全局函数。没有这些修饰的就是局部函数。

    (2).$(expr).load(url,data,callback);

    url:请求路径,绝对路径或者相对路径都能够.

    data: 请求參数,格式必须是key/value格式(json格式)

    callback:回调函数。function(data,textStatus,XMLHttpRequest) data:代表请求返回内容 textStatus:代表请求状态succuss, error, notmodify, timeout 4 种 XMLHttpRequest:XMLHttpRequest对象

    (3).默认情况下在没有向server发送请求数据的时候是load()方法就是GET请求,假设有请求參数那么就是POST请求

    (4). load()不能自己定义请求类型,而是由是否向server端发送请求数据.  load()不能自己定义数据交换格式,仅仅能使用文本(HTML)格式

    案例:

    load.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 type="text/javascript" src="../js/jquery-1.4.2.js">
            </script>
            <style type="text/css">
                div, span {
                     140px;
                    height: 140px;
                    margin: 20px;
                    background: #9999CC;
                    border: #000 1px solid;
                    float: left;
                    font-size: 17px;
                    font-family: Roman;
                }
                
                div.mini {
                     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">
         	$().ready(function(){
    			var json={username:$("#username").val(),psw:$("#psw").val()};
    			$("#b1").click(function(){
    				$("#one").load("load.jsp",json,function(data,textStatus,XMLHttpRequest){
    					alert(data);
    					alert(textStatus);
    				});
    			});
    		});
        </script>
    </html>
    
    load.jsp(相当于一个server,也能够使用Servlet我这里使用的jsp比較方便)
    <%@ page language="java" pageEncoding="UTF-8"%>
    <%
    	System.out.println("connection server success!");
    	
    	System.out.println(request.getMethod());//获取请求參数类型
    	
    	System.out.println("username = "+request.getParameter("username"));//获取请求參数
    	System.out.println("password = "+request.getParameter("psw"));
    
    	
    	out.println("helloworld!");
    	
    %>
    浏览器显示:


    控制台显示:




  • 相关阅读:
    leetcode第9题判断回文数
    leetcode整数反转第七题
    leetcode刷题两数之和
    找工作之旅
    C#和.Ne学习第五天
    C#和.Ne学习第四天
    C#和.Ne学习第三天
    C#和.Ne学习第二天
    C#和.Ne学习第一天
    从今天开始正事学习C#和.Net了
  • 原文地址:https://www.cnblogs.com/zhchoutai/p/7144435.html
Copyright © 2020-2023  润新知