学习Ajax——入门篇02

2017-12-19 08:20:51来源:CSDN作者:Mynewclass人点击

分享

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>

结果:
这里写图片描述
这里写图片描述

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台