ajax 综合运用案例,jQuery AJAX应用实例总结

最新推荐文章于 2023-04-27 12:52:47 发布
最新推荐文章于 2023-04-27 12:52:47 发布
阅读量307 收藏
点赞数
文章标签： ajax 综合运用案例

目录AJAX

AJAX解析纯文本数据

AJAX访问html文件

AJAX访问XML格式数据

AJAX访问JSON格式数据

AJAX访问中的$.ajax()函数

AJAX访问中的load()方法

AJAX访问中的$.get()方法

AJAX中的$.getJSON()函数

AJAX中的$.post()方法

本文实例总结了jQuery AJAX应用。分享给大家供大家参考，具体如下：

AJAX

是指一种创建交互式网页应用的网页开发技术。

AJAX=异步JavaScript和XML(标准通用标记语言的子集)。

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

AJAX是一种在无需重新加载整个网页的情况下，能够更新部份网页的技术。

通过在后台与服务器进行少量数据交换，AJAX可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，也就是：按需更新。

AJAX解析纯文本数据

$(document).ready(function() {

//获取页面中所有a元素中的第一个，并添加点击事件

document.getElementByTagName('a')[0].οnclick=function() {

//1、获取XHR对象

var request = new XMLHttpRequest();

//2、配置AJAX请求参数：请求类型，请求的URL资源，请求方式，默认为true，即异步

request.open('GET','URL',true);

request.open('GET',this.href+'?'+(new Date()),true);//每次请求都是最新数据

//3、将AJAX请求发送到服务器，GET请求不需要参数，可以传空或null

request.send();

//4、AJAX对象的事件属性onreadystatechange，不断监听服务器端的响应

request.onreadystatechange = function() {

//当请求状态为4，且响应码为200时，表示服务器响应成功，并返回了用户数据

if (request.readyState == 4 && request.status == 200) {

//根据数据类型，更新当前页面中的DOM节点信息

document.getElementByTagName('h3')[0].innerHTML=request.responseText;

}

};

return false;//取消a元素的默认点击行为

};

});

AJAX访问html文件

$(document).ready(function() {

//获取页面中所有a元素，并添加点击事件

var aNodes = getElementByTagName('a');

//获取当前页面需要更新的DOM节点

var content = getElementById('content');

//给所有a元素添加点击事件，每个链接都会访问到一个不同的html文件

for (var i=0;i

aNodes[i].onclick = function {

//1、获取XHR对象

var request = new XMLHttpRequest();

//2、配置AJAX请求参数：请求类型，请求的URL资源，请求方式，默认为true，即异步

//request.open('GET','URL',true);

request.open('GET',this.href+'?'+(new Date()),true);//每次请求都是最新数据

//3、将AJAX请求发送到服务器，GET请求不需要参数，可以传空或null

request.send();

//4、AJAX对象的事件属性onreadystatechange，不断监听服务器端的响应

request.onreadystatechange = function() {

//当请求状态为4，且响应码为200时，表示服务器响应成功，并返回了用户数据

if (request.readyState == 4 && request.status == 200) {

//根据数据类型，更新当前页面中的DOM节点信息

document.getElementByTagName('h3')[0].innerHTML=request.responseText;

}

return false;//取消a元素的默认点击行为

}

};

});

AJAX访问XML格式数据

AJAX---xml

$(document).ready(function() {

//获取页面中所有a元素中的第一个，并添加点击事件

document.getElementsByTagName('a')[0].οnclick=function() {

//1、获取XHR对象

var request = new XMLHttpRequest();

//2、配置AJAX请求参数：请求类型，请求的URL资源，请求方式，默认为true，即异步

// request.open('GET','URL',true);

request.open('GET',this.href+'?='+(new Date()),true);//每次请求都是最新数据

//3、将AJAX请求发送到服务器，GET请求不需要参数，可以传空或null

request.send();

//4、AJAX对象的事件属性onreadystatechange，不断监听服务器端的响应

request.onreadystatechange = function() {

//当请求状态为4，且响应码为200时，表示服务器响应成功，并返回了用户数据

if (request.readyState == 4 && request.status == 200) {

var result = request.responseXML;

//解析当前XML文件中的每个节点数据，保存到对应变量中，XML支持所有DOM操作

var name = result.getElementsByTagName('name')[0].childNodes[0].nodeValue;

var age = result.getElementsByTagName('age')[0].childNodes[0].nodeValue;

var job = result.getElementsByTagName('job')[0].childNodes[0].nodeValue;

//根据数据类型，更新当前页面中的DOM节点信息

document.getElementById('name').innerHTML=name;

document.getElementById('age').innerHTML=age;

document.getElementById('job').innerHTML=job;

}

};

return false;//取消a元素的默认点击行为

};

});

我的信息

xml文件：

Zhang

28

php

AJAX访问JSON格式数据

JSON

$(document).ready(function() {

document.getElementById('btn').onclick = function(event) {

//第一种

var data = {

'name':'zhang',

'age':'28',

'hobby':['跑步','睡觉'],

'job':{

'php':'Mysql',

'html':'jQuery'

}

};

//第二种

var json = '{\

"name":"zhang",\

"age":"28",\

"hobby":["跑步","睡觉"],\

"job":{\

"php":"Mysql",\

"html":"jQuery",\

}\

}';

var data = eval('('+json+')');

document.getElementById('name').innerHTML=data.name;

document.getElementById('age').innerHTML=data.age;

document.getElementById('hobby').innerHTML=data.hobby[1];

document.getElementById('job').innerHTML=data.job.php;

//第三种

var request = new XMLHttpRequest;

request.open('GET','demo.json',true);

request.send(null);

request.onreadystatechange = function() {

if (request.readyState==4 && request.status==200) {

var data = JSON.parse(request.responseText);

document.getElementById('name').innerHTML=data.name;

document.getElementById('age').innerHTML=data.age;

document.getElementById('hobby').innerHTML=data.hobby[1];

document.getElementById('job').innerHTML=data.job.php;

}

}

}

});

我的信息

AJAX访问中的$.ajax()函数

$.ajax()

$(function() {

$('#btn').click(function() {

$.ajax({

type:'GET',//http的请求方法

url:'demo.json',//要获取数据的URL

data:null,//不给URL添加任何数据

dataType:'json',//将获取到的数据当作JSON类型处理

success:function(data) {//完成时调用

$('#name').text(data.name);

$('#age').text(data.age);

$('#hobby').text(data.hobby[1]);

$('#job').text(data.job.php);

},

error:function(data) {//失败时调用

alert('获取失败！');

}

});

});

});

我的信息

AJAX访问中的load()方法

get

$(function() {

$('button').click(function() {

//1、获取纯文本文件的内容

$('div').load('hello.txt');

//2、获取html文件的内容，可以使用jquery选择器，按需获取

$('div').load('hello.html');//获取html文件全部内容

$('div').load('hello.html li:first','?'+(new Date()));//获取第一个li的内容

$('div').load('hello.html li:eq(2)');/获取索引为2的li内容

$('div').load('hello.html li:odd','?'+(new Date()));//获取全部li中索引为奇数的内容

//3、获取XML中的数据，与访问HTML一样，也可以使用选择器

$('div').load('1.xml');//返回xml,全部同行显示

$('div').load('1.xml work');//显示指定标签名的数据

$('div').load('1.xml work',function() {

$(this).css('color','red');

});//可以使用回调函数

//4、获取JSON数据，json不能直接使用，必须通过回调函数来进行解析后再使用

$('div').load('demo.json',function(data) {

//将获取到的json字符串解析为js对象

var jsonObj = JSON.parse(data);

$(this).empty()

$(this).append('

姓名：'+jsonObj.name"'

')

});

});

});

测试

AJAX访问中的$.get()方法

get

$(function() {

$('button').click(function(event) {

//1、从服务器中返回纯文本或html

$.get('1.php',function(data) {

$('#con').html(data);

});

//2、服务器返回XML格式数据

$.get('1.php',function(data) {

//将XML数据转为jQuery对象，并获取内部的数据

var name = $(data).children('name').text();

//将解析出的数据拼接成需要显示的html代码

var html = '

'+name+'

';

//将html代码插入到指定节点

$('#con').html(html);

});

//3、服务器返回JSON格式数据

$.get('1.php',function(data) {

var jsonObj = JSON.parse(data);//返回一个JSON格式字符串，需要先解析成JS对象

$('#con').empty().append('

姓名:'+jsonObj.name+'

');

});

});

});

测试

1.php:

echo 'hello world!';//纯文本

//XML格式数据

echo <<

Zhang

28

php

XML;

//JSON格式数据

echo '{"name":"zhang","age":"28","hobby":["跑步","睡觉"],"job":{"php":"Mysql","html":"jQuery"}}';

?>

AJAX中的$.getJSON()函数

$.getJson('1.php',function(data) {

$('#con').empty().append('

姓名:'+data.name+'

');

});

AJAX中的$.post()方法

post

$(function() {

$('#name').change(function(event) {

$.post(

'check.php',

{

'name':$(this).val()

},

function(data) {

console.log(data);

$('#name').next().empty();

$('#name').after(data);

}

);

});

$('#sub').click(function(event) {

var name = $('#name').val();

if ('' == name && null == name) {

$('#name').after('用户名不能为空');

return false;

}

});

});

姓名：

密码：

check.php

$info = $_POST;

$name = isset($info['name']) ? $info['name'] : '';

$arr_name = ['zhang','li'];

if (!empty($name) && in_array($name, $arr_name)) {

echo 'alert("名称已存在");window.history.back(-1);';

} elseif (empty($name)) {

echo 'alert("不可为空");window.history.back(-1);';

} else {

echo '名称可用';

}

?>

希望本文所述对大家jQuery程序设计有所帮助。

珂珂爱啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AJAX之jQuery操作
zuomengjia的博客
11-20 632
jQuery之AJAX 日常开发里为了提高开发效率，一般会使用框架中的AJAX语法，例如经常使用的jQuery，也给我们封装好了AJAX的一些语法操作，而且jQuery也封装了JSONP跨域。 几种常用的方式.ajax，.ajax，.ajax，.post， $.get， $.getJSON ...
AJAX 实例
流年、你奈我何
04-01 464
AJAX 实例 一个简单的AJAX实例 创建一个简单的XMLHttpRequest，从一个TXT文件中返回数据。 用AJAX加载 XML 文件 创建一个简单的XMLHttpRequest，从一个XML文件中返回数据。 用AJAX进行一次 HEAD 请求 检索资源（文件）的头信息。 用AJAX进行一次指定的 HEAD 请求 检索资源（文件）的指定头信息。 用AJAX从ASP 文件返
一个完整的ajax应用例子
09-25
一个完整的用js写的ajax例子，模仿注册页面输入用户名，输入框失去焦点后，后台异步判断该用户名是否可用，并在页面显示判断结果
jQuery的Ajax实例（附完整代码）
热门推荐
Yuan_mingyu的博客
02-02 8万+
目录写在前边什么是AjaxAjax基本结构实例实例1实例2小结 写在前边 作为一个前端刚入门没多久的小白，想在这里分享一下我的学习内容，就算是学习笔记了。因为前端的大部分学习都是通过网站上的教程，所以遇到不懂得问题，也只有求助于网络，通过度娘，了解到了一些论坛、博客。在发现了众多技术大牛的同时，我也发现，一些像我这样的小白，由于能力有限，在查找相关资料的时候，对于大佬的一些操作理解困难，虽说能照猫...
AJAX综合案例
qq_48578877的博客
08-31 194
Ajax综合实现案例
Ajax和Json综合案例
最新发布
qq_45681515的博客
04-27 446
ajax笔记
ajax的详细例子
飞鸟的博客
11-12 254
前台       js.......................... function _reg_checkusername(){  if($("#username").val()!=""){   $("#_checkusername_result").html("正在检查用户名…");   $.post("/xml/_xml_reg_
jQuery AJAX应用实例总结
01-19
本文实例总结了jQuery AJAX应用。分享给大家供大家参考，具体如下： AJAX 是指一种创建交互式网页应用的网页开发技术。 AJAX=异步JavaScript和XML（标准通用标记语言的子集）。 AJAX是一种用于创建快速动态网页的...
基于JQuery框架的AJAX实例代码
10-29
**基于JQuery框架的AJAX实例详解** 在Web开发中，AJAX（Asynchronous JavaScript and XML）技术允许我们在不刷新整个页面的情况下与服务器交换数据并局部更新页面内容，极大地提升了用户体验。而JQuery是一个强大的...
jQuery ajax分页插件实例代码
01-19
既然说到基于jQuery的ajax分页插件，那我们就先看看主要的代码结构：（我觉得对咱们程序员来说再优美的文字描述、介绍也 比不上代码来得实在。） 　1、首先定义一个pager对象： var sjPager = window.sjPager = {...
25个优秀的Ajax技术和实例
zhoujinxiong
06-05 599
1.Ajax RSS reader 一个简单的RSS reader，读取远程xml数据基于AJAX,PHP,MYSQL的RSS源， 这个例子允许用户在一个网页中查看多种源内容 2.Ajax 桌面 该指南是一个手把手教程，通过它你可以创建一个类似 于PageFlagePageFlage 和 Netvibes的桌面/网页。这个指南的目的是展示一些基于web应用程序的技巧，这些技巧也是比较常用的，比...
Ajax 简单案例
qq_41179691的博客
02-19 1413
Ajax 发送 GET // 1、创建对象 var xhr = new XMLHttpRequest(); // 2、初始化 设置 请求方法 url 是否异步（true为异步） xhr.open('GET', 'http://127.0.0.1:8888/ajax', true); // 3、发送 xhr.send(); /* 4、回调（处理服务端返回的数据） readyState: 0: 请求未初始
Ajax介绍以及实例
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
06-20 1140
Ajax实例讲解
jQuery Ajax 实例 全解析
weixin_33738982的博客
07-23 162
今日台湾网 jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, ...
ajax完整案例
梦想不会灭
08-30 1811
在jQuery中AJAX的写法有3种，ajax，ajax，ajax，post，get这三种。其中get这三种。其中get这三种。其中post和get是简易写法，高层的实现，在调用他们的时候，会运行底层封装好的get是简易写法，高层的实现，在调用他们的时候，会运行底层封装好的get是简易写法，高层的实现，在调用他们的时候，会运行底层封装好的ajax。 ajax案例 $.ajax({ url:"http://www.microsoft.com", //请求的url地址 dataType:"
AJAX基础实例
qq_44920883的博客
09-22 413
AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 AJAX实例展示 服务端应用的express框架 **服务端** //引入express const express = require('express') // 创建应用对象 const app =express() // 创建路由规则 //request 对请 //response 响应 //get 路由
Ajax案例实战分析
weixin_45688123的博客
07-25 807
Ajax，全称为AsynchronousJavaScriptandXML，是利用JavaScript在保证页面链接不改变的情况下，滑动某一区域会不断地出现新的数据，是与服务器交换数据并更新部分网页的技术。通过对爬取NBA微博数据案例来体会Ajax分析和爬取的基本流程，由于Ajax接口大部分都是以JSON的格式返回数据，在一定程度上减少了对数据提取的工作量。......
AJAX案例操作
qq_66429904的博客
12-09 722
ajax
ajax常用案例,AJAX实例
weixin_34649252的博客
08-05 2023
AJAX实例用户页面发起一个请求， 使用servlet输出数据到jsp练习使用HttpServletResposne输出。pint使用servlet输出一个字符串响应ajax请求根据省份id查询省份名称需求：用户在文本框架输入省份的编号id，在其他文本框显示省份名称● 项目环境准备：数据库：springdb数据表：● 省份信息表：CREATE TABLE `province` (`id` int(...
利用Django与jQuery开发AJAX应用及无水印PDF教程
本资源是一本名为《Django JavaScript ...《Django JavaScript Integration AJAX and jQuery》是一本适合初级至中级开发者深入理解并实际运用Django框架和AJAX技术的实用指南，是提升Web开发技能的重要参考资料。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值