JQuery AJAX $.get()方法

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种创建快速动态网页的技术。

AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新。

JQuery脚本库里所提供的AJAX提交的方法有很多,但主要的方法有$.get(),$.post(),$.ajax()。其中$.ajax()是前两种方法的底层实现,可以提供比前两者更多的属性与参数设置,如果需要高级的设置使用,建议使用$.ajax()方法。

【转载使用,请注明出处:http://blog.csdn.net/mahoking

学习$.get()方法

学习$.post()方法

学习$.ajax()方法

$.get()方法

get() 方法通过远程 HTTP GET 请求载入信息。

语法:

$.get(url,data,success(response,status,xhr),dataType)

注释:

url                               必需。规定将请求发送的哪个 URL。

data                           可选。规定连同请求发送到服务器的数据。

success(response,status,xhr)      可选。规定当请求成功时运行的函数。

额外的参数:

response - 包含来自请求的结果数据

status - 包含请求的状态

xhr - 包含 XMLHttpRequest 对象

dataType                   可选。规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script、text、html等)。

演示案例:

1、 创建Web项目JQueryAjax。

2、 在WebRoot下创建js/jquery文件目录,添加jquery-2.1.1.js

3、 创建Servlet(AjaxGetServlet)。如下:

public class AjaxGetServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		retData(request, response, "GET");
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		retData(request, response, "POST");
	}

	/**
	 * 对请求提供返回数据
	 * @param request
	 * @param response
	 * @param method
	 * @throws IOException
	 */
	private void retData(HttpServletRequest request, HttpServletResponse response,String method) throws IOException{

		String userName = request.getParameter("userName");
		String age = request.getParameter("age");
		PrintWriter out = response.getWriter();
		out.print(method+":userName="+userName+",age="+age);
		out.flush();
	}
}

4、 创建jquery_ajax_method_get.jsp。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">

    <title>JQuery AJAX</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<script type="text/javascript" src="js/jquery/jquery-2.1.1.js"></script>
	<script type="text/javascript">

	//$.get()方法
	function ajaxGet(){
		$.get(
				"servlet/AjaxGetServlet",      //url地址
				{
					userName:$("#userName").val(),
					age:$("#age").val()
				},
				function(data){ //回传函数
					alert(data);
				},
				"text")
	}
	</script>
  </head>
  <body>
  <br>
 <div class="text_align-center">JQuery AJAX $.get()方法提交演示</div>
  <hr />
  	<div class="align-center">
		<form action="" method="post">
			姓名:<input type="text" name="userName" id="userName"/><br/>
			年龄:<input type="text" name="age" id="age"/><br/><br/>
			<input type="button" onclick="ajaxGet()" value="$.get()方法提交"/><br/>
		</form>
	</div>
  <hr />
  </body>
</html>

5、将项目部署到Tomcat中,测试一下。

【转载使用,请注明出处:http://blog.csdn.net/mahoking

时间: 2024-10-19 08:43:47

JQuery AJAX $.get()方法的相关文章

$().each() 与 $.each()区别,以及 jquery ajax 应用

在jquery 中我们可以选择$().each() 与 $.each() 进行迭代对象和数组 $(items).each(function(){ //item })   , 而后者则 $.each(items,function(i,item){ //write your code }) -----------------jquery   ajax---------------------- jquery 开发ajax 相对来说 是比较简单的  具体情况可以参考 [QLeelulu的ajax系列]

HTML5第8次课堂笔记( 模拟form表单提交数据,xml的解析,jQuery的Ajax方法使用, mui的ajax)

HTML5第8次课堂笔记 1.  模拟form表单提交数据:(get方式) <body> <formmethod="get"action="DataTest7"> <inputtype="text"name="uname"value="yang"id="myname"><br/> <inputtype="password&q

解析JQuery Ajax

jQuery是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址.

初识JQuery AJAX

初识JQuery AJAX APP开发群:347072638(HTML5,APP) 1.先看一个JQuery AJAX Demo HTML端: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.

使用jQuery的data方法来为页面中的某个元素存储数据,(获取焦点,清除默认值)

使用data方法可以避免在DOM中存储数据,有些前端开发er喜欢使用HTML的属性来存储数据: 使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的. 我们可以使用jQuery的data方法来为页面中的某个元素存储数据: html部分: 1 <form id="testform"> 2 <input type="text" class="clear" value="Always cleared&qu

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

Jquery插件使用方法

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站.利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑.本文的目的就是可以快速了解jQuery插件

ajax系列之用jQuery的ajax方法向服务器发出get和post请求

打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个form表单里用来实现form提交,第二个输入框是单独的.没有包含在form里,下面就用这两个输入框来学习下jQuery的ajax. 1,前端的html和javascript代码 页面html 1 <main style="text-align: center; margin: 200px a

jquery中$.ajax方法提交表单

function postdata(){                        //提交数据函数 $.ajax({                                //调用jquery的ajax方法 type: "POST",                       //设置ajax方法提交数据的形式 url: "ok.php",                      //把数据提交到ok.php data: "writer=

Jquery自定义扩展方法(二)--HTML日历控件

一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看看效果图吧 效果图很简单,代码封装在JQuery中,网页端只需要要调用即可: 二.Jquery自定义实体对象 Jquery可以自定义函数function,有没有可以定义实体对象,里面封装方法那?查询了一下资料发现,是可以的,不仅能够封装属性,还可以写自己的方法,调用模板代码如下: $.Calende