针对上一篇JQuery学习中使用JQuery和Prototype整合使JQuery的tab实现局部数据,使用Prototype的Ajax中方法,现在使用JQuery实现同样的功能,如下:
jquery.js下载地址:http://dl.iteye.com/topics/download/f961ee8e-24fb-32b5-830a-b18e471e42f9
jQuery真是个非常强大的类库,今天学习了一下,爱上了,讲下jQuery中ajax使用方法.
例子:
test.html
页面引用<script type="text/javascript" src="jquery.js
"></script>
内容有:
<div id="my400800">Hello World!</div>
用法1:(页面载入时读取远程页面内容到divMsg)
$("#my400800").load(http://www.my400800.cn
, { "resultType": "html" });
返回类型resultType有如下几种:
"xml", "html", "script", "json", "jsonp", "text"
用法2:(点击post数据返回数据)
<input type="button" id="bnajax" value="ajax" onclick="ajaxTest()" />
<script type="text/javascript" >
function ajaxTest()
{
$.post("http://www.my400800.cn
", { "searchKey": "400电话" },function(data)
{
$("#my400800").html(data);
}
);
}
</script>
下面是摘自网络的函数:
post方法如下:
function test(access_url, tipE){
$.post(access_url,{
first: "test1", second: "test2"
}, function(data){
if(data.success){
$('#' + tipE).html('处理成功');
}else{
$('#' + tipE).html(data.msg);
}
},'json'
)
}
如果想用get方法,则把post换为get就可以了,挺简单!
这个函数中data值为服务端返回的值,且为JSON格式,当然了,这里可以用其他类型,如text,xml等等之类。
服务端返回值是JSON格式,如:{success:true, msg:"测试成功"}
AJAX乱码问题
产生乱码的原因:
1、xtmlhttp 返回的数据默认的字符编码是utf-8,如果客户端页面是gb2312或者其它编码数据就会产生乱码
2、post方法提交数据默认的字符编码是utf-8,如果服务器端是gb2312或其他编码数据就会产生乱码
解决办法有:
1、若客户端是gb2312编码,则在服务器指定输出流编码
2、服务器端和客户端都使用utf-8编码
gb2312:header('Content-Type:text/html;charset=GB2312');
utf8:header('Content-Type:text/html;charset=utf-8');
注意:
如果你已经按上面的方法做了,还是返回乱码的话,检查你的方式是否为get,对于get请求(或凡涉及到url传递参数的),被传递的参数
都要先经 encodeURIComponent方法处理.如果没有用encodeURIComponent处理的话,也会产生乱码.
相关推荐
### AJAX POST 与 GET 提交的区别详解 #### 一、GET与POST基本概念及应用场景 在探讨AJAX中GET和POST的区别之前,我们先来了解一下这两种请求方式的基本概念。 **GET**请求通常用于获取资源信息,它将参数拼接到...
当使用jQuery的Ajax方法与后端进行数据交互时,通常会涉及到HTTP头的设置,如`contentType`(指定发送数据的格式)和`dataType`(期望服务器返回的数据类型)。在处理JSON数据时,这些设置至关重要,例如: ```...
1. jQuery的$.get和$.post方法:这两种方法是jQuery提供的Ajax(异步JavaScript和XML)接口,用于与服务器进行非刷新的数据交换。$.get用于发送GET请求,而$.post用于发送POST请求。它们都接受四个参数:URL、数据、...
4. **PHP处理请求**:在服务器端,PHP脚本(如`server_script.php`)接收到请求后,可以使用`$_POST`或`$_GET`数组获取发送的数据。例如: ```php if ($_SERVER['REQUEST_METHOD'] === 'POST') { $data = $_POST;...
在现代Web应用开发中,SpringMVC框架与jQuery AJAX的结合使用是常见且高效的数据交互方式。本示例将深入探讨如何在SpringMVC环境中利用jQuery的AJAX功能实现动态、无刷新的数据交换。 首先,SpringMVC是Spring框架...
本文将详细介绍使用jQuery AJAX实现三种不同方式的前后台数据传输,以及如何处理界面内容的传值和返回值。 1. **基本的AJAX调用** jQuery提供了`$.ajax()`方法,它是所有其他AJAX功能的基础。例如,我们可以使用...
load()方法 、 $.get()和$.post()方法 、 $.getScript()和$.getJson() 、 $.ajax()方法 、 ...jQuery中的Ajax全局事件 这些都有详尽的例子,一看代码,你就能明白jquery里实现ajax是怎么回事了,简单明了。
`$.get()`函数是最简单的一种异步请求方式,它发送一个GET请求到指定的URL,并将数据附加在URL的查询字符串中。基本语法如下: ```javascript $.get(url, [data], [callback]); ``` 其中: - `url`:请求的目标URL...
这个方法允许我们指定请求的类型(如GET或POST)、URL地址、传递的数据以及当请求成功时如何处理返回的数据。 2. 后台数据的返回格式:在后台处理完毕后,返回的数据需要被编码为JSON格式。PHP是常用于处理请求并...
- 在前端,jQuery监听表单提交事件,阻止默认的表单提交行为,然后使用$.ajax()发送包含新数据的POST请求到ASP服务器端脚本。 - ASP接收到请求后,通过ADO(ActiveX Data Objects)处理数据库操作,如使用SQL ...
- **发送AJAX请求**:使用`$.ajax()`函数,设置URL(指向获取数据的接口)、类型(GET或POST)、数据(如果需要的话,如当前页码、每页显示数量)等参数。 - **处理服务器响应**:成功回调函数中,将返回的数据...
在“使用jQuery ajax提交表单代码”的资源中,我们可以期待看到一个清晰的示例,展示如何将表单数据发送到服务器,并处理响应。 1. **jQuery的$.ajax()函数** - **基本语法**:`$.ajax({ options });` - **选项...
3. 发起AJAX请求,如`$.ajax()`,指定URL、类型(GET或POST)、数据格式(JSON)以及成功回调函数。 4. 在回调函数中,解析返回的JSON数据,将其转换为JavaScript对象。 5. 使用jQuery方法将JavaScript对象的数据...
在提供的代码片段中,可以看到两个函数:`doload1` 和 `doload2`,它们都使用了 jQuery 的 AJAX 方法来发送请求并处理返回的数据。 ##### 2.1 doload1 函数 ```javascript function doload1() { $.ajax({ url: ...
Java程序与jQuery AJAX的结合是Web开发中常见的一种技术组合,用于实现页面的无刷新更新。在本篇文章中,我们将深入探讨如何在Java后端与前端利用jQuery的AJAX功能进行交互,提升用户体验。 首先,jQuery是一个强大...
JQuery AJAX 和 JSON 是在 Web 开发中处理异步数据传输和数据格式化的重要工具。本文将深入探讨这两个概念以及它们在实际应用中的使用方法。 首先,JQuery 的 AJAX(Asynchronous JavaScript and XML)功能允许...
**jQuery AJAX 中的 POST 与 GET 请求的区别** 在 jQuery 的 AJAX 功能中,POST 和 GET 是两种最常见的 HTTP 请求方法,它们各自有其特定的用途和特性。以下是对这两种方法的详细对比: 1. **幂等性(Idempotency...
ASP.NET与jQuery AJAX的结合是Web开发中常见的一种技术组合,它使得页面的异步更新成为可能,提高用户体验。在本教程中,我们将探讨如何在ASP.NET中利用jQuery的AJAX功能来调用后台处理程序或Web服务。 首先,我们...
这里,`url`指定请求的地址,`type`定义请求类型(GET或POST),`data`为发送的数据,`success`和`error`分别处理成功和失败的情况。 3. **简化的AJAX函数**:jQuery提供了更加简洁的接口,如`$.get()`、`$.post()...