AJAX 学习笔记[七] AJAX 与JQuery 框架

最新推荐文章于 2023-01-12 17:12:37 发布
最新推荐文章于 2023-01-12 17:12:37 发布
阅读量102 收藏
点赞数
文章标签： javascript c# ViewUI

 

A  使用JQuery 的load( ) 方法

使用load( ) 方法发送异步数据，返回的数据不需要用户考虑是文本还是XML，JQuery 都会自动进行处理。示例如下：

客户端（14-1.html ）：

<html>
<head>
<title>jQuery简化Ajax步骤</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function startRequest(){
    $("#target").load("14-1.aspx");
}
</script>
</head>
<body>
<input type="button" value="测试异步通讯" onClick="startRequest()">
<br><br>
<div id="target"></div>
</body>
</html>

服务器端（14-1.aspx ）：

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
    Response.Write("异步测试成功，很高兴");
%>

注意：如果服务器端返回的是XML 格式的数据，在客户端也会自动实现正确显示。

 

B  使用JQuery 的 $.get( ) 和 $.post( ) 方法

客户端（14-5.html ）：

<html>
<head>
<title>GET VS. POST</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function createQueryString(){
    var firstName = encodeURI($("#firstName").val());
    var birthday = encodeURI($("#birthday").val());
    //组合成对象的形式
    var queryString = {firstName:firstName,birthday:birthday};
    return queryString;
}
function doRequestUsingGET(){
    $.get("14-5.aspx",createQueryString(),
        //发送GET请求
        function(data){
            $("#serverResponse").html(decodeURI(data));
        }
    );
}
function doRequestUsingPOST(){
    $.post("14-5.aspx",createQueryString(),
        //发送POST请求
        function(data){
            $("#serverResponse").html(decodeURI(data));
        }
    );
}
</script>
</head>
 
<body>
<h2>输入姓名和生日</h2>
<form>
    <input type="text" id="firstName" /><br>
    <input type="text" id="birthday" />
</form>
<form>
    <input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
    <input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>
</html>

服务器端（14-5.aspx ）：

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
    if(Request.HttpMethod == "POST")
        Response.Write("POST: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
    else if(Request.HttpMethod == "GET")
        Response.Write("GET: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
%>

 

C  使用JQuery 的 $.ajax( ) 方法

客户端（14-6.html ）：

<html>
<head>
<title>$.ajax()方法</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function createQueryString(){
    //必须两次编码才能解决中文问题
    var firstName = encodeURI(encodeURI($("#firstName").val()));
    var birthday = encodeURI(encodeURI($("#birthday").val()));
    //组合成对象的形式
    var queryString = "firstName="+firstName+"&birthday="+birthday;
    return queryString;
}
function doRequestUsingGET(){
    $.ajax({
        type: "GET",
        url: "14-5.aspx",
        data: createQueryString(),
        success: function(data){
            $("#serverResponse").html(decodeURI(data));
        }
    });
}
function doRequestUsingPOST(){
    $.ajax({
        type: "POST",
        url: "14-5.aspx",
        data: createQueryString(),
        success: function(data){
            $("#serverResponse").html(decodeURI(data));
        }
    });
}
</script>
</head>
 
<body>
<h2>输入姓名和生日</h2>
<form>
    <input type="text" id="firstName" /><br>
    <input type="text" id="birthday" />
</form>
<form>
    <input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
    <input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>
</html>

服务器端（14-5.aspx ）：

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
    if(Request.HttpMethod == "POST")
        Response.Write("POST: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
    else if(Request.HttpMethod == "GET")
        Response.Write("GET: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
%>

$.ajax( options )方法的参数非常地多，涉及Ajax 的方方面面，需要自己多多参考和实践。

 

注意：如果需要传递中文数据，必须进行两次encodeURI( ) 编码。

 

weixin_33737134
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用jQuery简化Ajax开发
07-22
使用jQuery简化Ajax开发，大大的提高了Ajax的开发效率。
Ajax和jQuery学习笔记
03-29
### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax？** Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用来创建快速动态网页的技术，通过在后台与服务器进行少量数据...
jQuery框架的ajax
hgdzw的博客
03-19 219
三种常见的请求 请求方式 语法 GET请求 $.get(url, [data], [callback], [type]) POST请求 $.post(url, [data], [callback], [type]) AJAX请求 $.ajax([settings 简单的get请求 参数名称 解释 url 请求的服务器端url地址 data 发送给服务...
jQuery框架：jQuery常用的Ajax方法有哪些?
最新发布
zy1992As的博客
01-12 282
在表15-12的Ajax操作方法中，$.ajax()是通用方法，通过该方法的setting参数，可以实现与$.get()、$.post()、$.getJSON()和$.getScript()方法同样的功能。在编写$.ajax()方法时，url是$.ajax()方法的必须参数，它既可以在settings参数之前编写，也可以在settings参数中编写。对于开发者而言，编写常规的Ajax代码并不容易，因为不同的浏览器对Ajax的实现并不相同，这也就意味着开发者需要编写额外的代码对浏览器进行测试。
AJAX经典应用之读取响应首部
NonShan的专栏
11-05 503
通过之前的几个例子，对于AJAX掌握逐渐深入。现在来介绍
简单Ajax几种写法
简单就好-怒的博客
02-26 1万+
XMLHTTPRequest GET方式 var xhr=new XMLHttpRequest(); xhr.open("get","servlet?name=testParam",true); xhr.send(null); xhr.onreadystatechange=function(){
jquery中ajax学习笔记4
10-28
### jQuery中Ajax学习笔记4：缓存问题与中文问题详解 #### 缓存问题解析 在Web开发过程中，经常会遇到浏览器缓存导致的数据更新问题。本文档将详细讲解如何识别和解决缓存问题。 ##### 什么是缓存问题？ 缓存...
jquery中ajax学习笔记3
12-09
摘要： ajax学习1中介绍了使用jquery封装的ajax来接收服务器端的文本数据以及使用XMLHttpReques对象来接收服务器端的文本数据 ajax学习2中介绍了使用XMLHttpReques来接收服务器的端XML数据，本节主要介绍使用jqery...
jQuery学习笔记之Ajax用法实例详解
10-23
主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求、载入、处理、传递等,需要的朋友可以参考下
zookeeper 修改储存的大小
知识的力量
09-30 6026
1、zookeeper 默认的储存的大小是1M ，如果修改在zkServer.sh 中添加一下参数：-Djute.maxbuffer=10240000 ZOO_USER_CFG="-Djute.maxbuffer=10240000"  修改后的文件为： #!/bin/sh      # Licensed to the Apache Software F
C++ 星图编程
热门推荐
一颗偏执的心
01-09 10万+
#include using namespace std; void printchs(char c,int m) { for(int j=1;j<=m;++j) cout<<c; } int main() { int n=6,i; for( i=1;i<=n;++i)
ajax 和jq教程,jquery 框架使用教程 AJAX篇
weixin_34441588的博客
08-05 259
jquery 框架使用教程 AJAX篇2009-10-11 14:47:26 作者：正好项目中准备使用thickbox，于是干脆抛弃prototype.js，看起jquery.js了。JQuery确实不错，体积比Prototype小了许多，而且使用起来更方便更灵活。有人说Prototype像JAVA，正统；而JQuery像Ruby，灵活，更趋于OOP。小试了下AJAX，感觉比prototype简洁...
全面认识Ajax
Jy
05-16 579
首先，在认识Ajax之前，我们来了解一下同步和异步在Ajax没被发现之前：有一个很长很多信息要填的表单，有姓名，编号，工作内容，联系方式，地址，邮箱等等，当你填完后，点击提交，等待了好几分钟，它给你返回一个邮箱重复了，你把邮箱改好了之后，再提交，又等了好几分钟，它给你返回联系方式格式错误。—–这就是同步请求：每按一次提交，客户端就发送一次请求（内含你填的信息）给服务器，服务器就返回信息给客户端， 同
使用JQUERY简化AJAX
liuq21_67的专栏
09-30 577
http://developer.51cto.com/art/201101/243958.htm
邀请QQ好友-QQ联系人导入
随便写写
09-04 1479
  项目中有个需求，要求能够导入MSN及QQ联系人。MSN的好说，有开源的jmsn及其它众多开源组件。可是QQ仍然是我行我素，至今也不开放API。虽然网上查到有lumaqq这样的开源   协议，可我Down下了折腾了半天，QQ都没有登录上去，好啦，我承认自己资质愚钝。时间紧迫，来不及仔细研究了，于是打起了QQ邮箱的主意~~     既然通过浏览器可以登录QQ邮箱，查看联系人，那么我们同...
简化版的AJAX
brain_bo的博客
07-25 784
AJAX异步请求 $.ajax({   url: 'https://www.baidu.com',//请求路径   type: 'post',//请求方式   data: data,//请求数据   dataType: 'json',//数据格式   cache: true,//请求缓存   async: true,//是否异步，默认true   success: function(data){...
Ajax.Request类的使用
u013156691的博客
04-13 1455
Ajax.Request类来自于库prototype.js使用方法如下：req = Ajax.Request(url, { method:"post/get", parameters:param, onComplete:function(r){} });
AJAX原理
-bin_bin-的博客
09-11 1461
1. AJAX简介及应用 AJAX（Asynchronous JavaScript And XML），直译为异步的JavaScript和XML。AJAX并不是一种全新的技术，而是将现有的JavaScript、XML等技术进行整合，通过异步请求的方式，实现页面无刷新式提交。需要强调的是，AJAX是客户端与服务器端的交互技术，和JavaScript的客户端验证技术有着本质的区别，读者不要混淆。 使用
jQuery-1.2学习笔记：基础用法与Ajax交互
"这篇资源是一份关于jQuery的学习笔记，主要涵盖了jQuery 1.2版本的基础用法和与Java的异步交互，以及Ajax的基础概念。" 在深入学习jQuery之前，首先要理解它是一个JavaScript库，旨在简化HTML文档遍历、事件处理、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值