学习Ajax——入门篇02

最新推荐文章于 2024-08-20 19:48:29 发布

J-Jian

最新推荐文章于 2024-08-20 19:48:29 发布

阅读量301

点赞数 1

分类专栏： Ajax 文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/Mynewclass/article/details/78814597

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Ajax用原生的Javascript编写的话，并不容易，但是Jquery很好地封装了Ajax，相比较原生的js，jquery的ajax更为简单，编写容易。下面就来认识下JQuery下的ajax。

一、JQuery中AJax load()方法

JQuery load()方法的作用是：从服务器加载数据，并返回数据放入到相应被selector绑定的的元素中。
其格式为：

$(selector).load(URL,data,callback);

参数说明

URL：要请求的数据的URL，可以将JQuery选择器添加到URL参数中
将test.txt中id=”p”的元素内容放入到id=”div”的
div元素中：

$("#div").load("test.txt #p");

data：是请求时一同发送的数据，类似于原生js中ajax中xmlhttp.send(data)，是键值对的形式出现。
callback：回调函数，就是load完之后执行的函数。（在父函数中作为参数的另一个子函数，当父函数执行完，子函数再执行。这个子函数就是回调函数），其实就是原生js中的onclick=funciton(){...}，回调函数的参数有：
responseTxt：回调成功，从服务器端取回到的数据，跟原生中javascript中的一样。
statusTxt：调用的状态显示，类似于onreadystatechange方法显示状态。
xhr：ajax最核心的XMLHttpRequest 对象

function(responseTxt,statusTxt,xhr)

具体的实例

test.txt：

Welcome Jian！
It's is JQuery ajax!
version 1.0

html部分：

<body>
<div id="div"><h2>利用JQuery中的AJax获取test.txt的内容</h2></div>
<button>获得外部内容</button>
</body>

jquery ajax部分（jquery需要加入jquery.js库文件）：

<script src="jquery/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div").load("test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功！");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>

结果：
这里写图片描述

二、JQuery Ajax中的get/post方法

1、get方法
一般都是用来向服务器请求资源数据，get方法需要注意的细节有一下几点：

get方法可能会取到缓存。
具体的介绍我在day01中记录了
get方法请求有长度的限制
get方法请求的参数是在URL中发送的,并且以键值对的形式存在。
get方法在发送敏感信息（比如用户密码等）时，不推荐使用。因为会缓存保存，/xxx/xxx/xxx.php?username=Jian&password=123;
其语法：

$.get(URL,callback);

简单的实例：
test_get.txt部分:

Welcome Jian！
It's a get method of ajax !
version 1.0

html部分:

<body>
<div id="div"><h2>利用AJax get方法获取test_get.txt的内容</h2></div>
<button>get</button>
</body>

jquery部分:

<script>
$(document).ready(function(){
  $("button").click(function(){
    $.get("test_get.txt",function(data,status){
        $("#div").html("数据：" + data + "<br/>"+"状态：" + status);//将data放入div中
    });
  });
});
</script>

结果为：
这里写图片描述

2、post方法
post方法一般用于向向指定的资源提交要处理的数据。与get方法不同，post方法多了data参数，此外也有以下几点细节：

post方法不会被缓存。
post方法请求有长度的限制
post在数据量大，且敏感时推荐使用。

其语法为：

$.post(URL,data,callback,type)

简单实例：
test_post.jsp部分：使用jstl标签获取并输出

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<title>ajax_post</title>
</head>
<%  //获取post上来的json数据 
    String username = request.getParameter("name");
    String password = request.getParameter("pass");
    //setAttribute存入数据
    pageContext.setAttribute("username", username);
    pageContext.setAttribute("password", password);
%>
<body>
<div>Welcome <c:out value="${username}"/><br/>
你的帐号为：<c:out value="${username}"/><br/>
你的密码为：<c:out value="${password}"/>
</div>
</body>
</html>

html部分：

<div id="div"><h2>利用AJax post方法提交数据并更新获取test_post.jsp的内容</h2></div>
<button>post</button>

jquery部分：

<script src="jquery/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.post("test_post.jsp",
    //data
    {
      name:"Lijian",
      pass:"123"
    },
    //callback
    function(data,status){
      $("#div").html(data);
    });
  });
});
</script>

结果：
这里写图片描述

J-Jian

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
学习Ajax——入门篇02

Ajax用原生的Javascript编写的话，并不容易，但是Jquery很好地封装了Ajax，相比较原生的js，jquery的ajax更为简单，编写容易。下面就来认识下JQuery下的ajax。一、JQuery中AJax load()方法JQuery load()方法的作用是：从服务器加载数据，并返回数据放入到相应被selector绑定的的元素中。其格式为：$(selector).load(UR
复制链接

扫一扫

专栏目录