ajax-3种数据传输的实现方法（使用jQuery）

最新推荐文章于 2023-08-11 07:51:40 发布
最新推荐文章于 2023-08-11 07:51:40 发布
阅读量719 收藏 2
点赞数
分类专栏： ajax 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tyutjavalily/article/details/47833095
版权

1，什么是啊ajax  :就是在不刷新网页的基础上，能够实现和服务器的通信

2，常见的数据传输的方式：

  --xml: 笨重，但是XML是通用的数据交换格式

  --HTML：不需要解析，可以直接放入文档中，用于只是更新部分代码的情况

  --json：轻巧。许多java中的类和集合可以使用第三方的jar包转换为json对象

3，jQuery中常用的使用的方法：

  ---load(url,data,callback)

  --get(url,data,callback)

  --getJSON(url,data,callback)

  ---postJSON(url,data,callback)

  --get(url,data,callback,"json")

4,代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>People at Clearleft</title>
  <style type="text/css">
  	@import url("clearleft.css");
  </style>
   <script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>
  <script type="text/javascript">
  	$(function(){
  		
  		$("a").click(function(){
  			
  			var url=this.href;
  			$.getJSON(url,function(data){
  				
  				var name=data.person.name;
  				var email=data.person.email;
  				var website=data.person.website;
  				
  				$("#details").empty()
  							 .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")
  							 .append("<a href='http:"+website+"'>http:"+website+"</a>");
  			});
  			
  			return false;
  		});
  	})
  
  </script>
  
</head>
<body>
  <h1>People</h1>
  <ul>
    <li>
      <a href="files/andy.js">Andy</a>
    </li>
    <li>
      <a href="files/richard.js">Richard</a>
    </li>
    <li>
      <a href="files/jeremy.js">Jeremy</a>
    </li>
  </ul>
  <div id="details"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>People at Clearleft</title>
  <style type="text/css">
  	@import url("clearleft.css");
  </style>
  	
  <script type="text/javascript">
  	//测试json
  	
  	var jsonObject={
  			"name":"lily",
  			"age":23,
  			"address":{"city":"beijing","work":"yucheng"},
  			"working":function(){
  				alert("我正在工作");
  			}
  	}
	
  //	alert(jsonObject.name);
  //	alert(jsonObject.working);
  	
  	var jsonStr={"'name':'lily'"};
  	//通过eval可以吧json字符串转换为json函数
  	
  	val testStr=eval("("+jsonStr+")");
  	
  	alert(testStr.name);
  </script>
  	
</head>
<body>
  <h1>People</h1>
  <ul>
    <li>
      <a href="files/andy.js">Andy</a>
    </li>
    <li>
      <a href="files/richard.js">Richard</a>
    </li>
    <li>
      <a href="files/jeremy.js">Jeremy</a>
    </li>
  </ul>
  <div id="details"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>People at Clearleft</title>
  <style type="text/css">
  	@import url("clearleft.css");
  </style>
   <script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>
  <script type="text/javascript">
  	$(function(){
  		
  		$("a").click(function(){
  			
  			var url=this.href;
  			$.getJSON(url,function(data){
  				
  				var name=data.person.name;
  				var email=data.person.email;
  				var website=data.person.website;
  				
  				$("#details").empty()
  							 .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")
  							 .append("<a href='http:"+website+"'>http:"+website+"</a>");
  			});
  			
  			return false;
  		});
  	})
  
  </script>
  
</head>
<body>
  <h1>People</h1>
  <ul>
    <li>
      <a href="files/andy.js">Andy</a>
    </li>
    <li>
      <a href="files/richard.js">Richard</a>
    </li>
    <li>
      <a href="files/jeremy.js">Jeremy</a>
    </li>
  </ul>
  <div id="details"></div>
</body>
</html>






大厂女程序媛
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery中使用ajax传输超大数据的解决方法
12-08
直接说问题，在一个页面用了Jquery(1.6)的Ajax请求，用的post，传递显示的数组有500多条.php端却只能接受到50条左右。刚开始以为是web服务器设置的问题，把，max_upload_size这类的都改了。但是没有效果，后来尝试用...
1+X WEB前端中级 选择题-多选汇总2
热门推荐
niuroufen5的博客
11-19 2万+
点击前往????1+X WEB前端中级 选择题-单选汇总1 在MySQL中,创建一个购物表,其中一个字段是记录购物时间(要求精确到秒),则该字段比较合适的数据类型是( )。 A. DATE B. TIME C. DATETIME D. TIMESTAMP 在Bootstrap4中,下列说法正确的是 A. <576px 像素的为超小屏幕,用 .col-* B. ≥576px 像素的为小屏幕,用 .col-sm-* C. ≥768px 像素的为中等屏幕,用 .col-md-* D.
用ajax+XHTML,ajax
weixin_39890633的博客
08-06 352
1. ajax 是什么？有什么作用？ajax，全称：Asynchronous JavaScript And XML，异步的JavaScript和XML。ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的 CSS/HTML/JavaScript，而其中最核心的依赖是浏览器提供的 XMLHttpRequest 对象，是这个对象使得浏览器可以发出 HTTP 请求与接收 HTTP 响应。ajax...
ajax所包含的技术
wangzhixiao123456的博客
05-16 1405
1.使用CSS和XHTML来表示。 2. 使用DOM模型来交互和动态显示。 3.使用XMLHttpRequest来和服务器进行异步通信。 4.使用javascript来绑定和调用。在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有...
AJAX从前端传递数据到后端
weixin_45730969的博客
07-31 3876
使用jQuery AJAX从前端传递数据到后端
如何用ajax请求发送传数据
y1y2y3y4y5y6jl的博客
09-09 1106
如何使用ajax请求发送传数据
Jquery Ajax 前后台数据传输
10-30
实现Jquery Ajax 三种方案进行前后台数据传输，界面内容传值及返回值实例！
jquery创建一个ajax关键词数据搜索实现思路
12-11
Ajax创建简单和有吸引力的 Ajax 搜索，这是继《使用jQuery打造一个实用的数据传输模态弹出窗体》第二篇jquery项目实际运用的教程，希望大家在开发项目的时候能够根据自己的实际情况灵活运用 点击搜索默认显示所有的...
使用jquery Ajax实现上传附件功能
12-01
用过jquery的Ajax的人肯定都知道，Ajax的默认编码方式是”application/x-www-form-urlencoded“，此编码方式只能编码文本类型的数据，因此Ajax发送请求的时候，会把data序列化成 一个个String类型的键值对,此种传输...
ajax通过post方式和后端建立连接传输数据
YY的博客
11-08 2964
ajax，利用post请求方式和后端建立连接，传输数据
Ajax中使用JSON传输数据
03-01
json.js and json.jar 博文链接：https://terran-li2008.iteye.com/blog/199088
ajax经典怎样传输数据
08-09
ajax经典怎样传输数据，$.ajax({ async: true, // 默认true(异步请求) cache: true, // 默认true,设置为 false 将不会从浏览器缓存中加载请求信息。 type: "POST", // 默认:GET 请求方式:[POST/GET] dataType: "xml", //默认["xml"/"html"] 返回数据类型:["xml" / "html" / "script" / "json" / "jsonp"] url: "Test.ashx", // 默认当前地址,发送请求的地址 data: { key: "value" }, // 发送到服务器的数据 error: function(xml) { alert('Error loading XML document' + xml); }, // 请求失败时调用 timeout: 1000, // 设置请求超时时间 success: function(xml) { // 请求成功后回调函数 参数：服务器返回数据,数据格式. $("#users").empty(); // 用Jquery处理xml数据 $(xml).find('Table').each(function() { var loginname = $(this).find("Loginname").text(); var name = $(this).find("Name").text(); $("#users").append("<li>" + loginname + " - " + name + "</li>"); }); /* $(xml).find('user').each(function(i) { var loginname = $(xml).find("user loginname").eq(i).text(); var name = $(xml).find("user name").eq(i).text(); $("#users").append("<p>" + loginname + "</p>" + "<p>" + name + "</p><Br />"); }) $(xml).find("student").each(function(i){ var id=$(this).children("id"); //取对象 var id_value=$(this).children("id").text(); //取文本 alert(id_value);//这里就是ID的值了。 alert($(this).attr("email")); //这里能显示student下的email属性。 //最后输出了，这个是cssrain的写法，貌似比macnie更JQ一点 $('<li></li>').html(id_value).appendTo('ol'); }); */ } })
2021年下半年Web前端中级理论模拟试卷
niuroufen5的博客
11-23 9320
一、单选题（共 30 道小题， 60 分） 1.使用composer下载Laravel时，若不指定下载版本，默认下载哪个版本的Laravel？（） A、最新版本 B、稳定版本 C、某一固定版本 D、无法下载 2.关于Socket说法错误的是（）。 A、Socket通常称为“套接字”，用于描述IP地址和端口 B、服务器和客户端能够通过Socket进行交互 C、Socket是对TCP/IP协议的封装和应用 D、Socket和HTTP一样，是一种协议 3.在PHP环...
Ajax前后端传递数据的方式
icbjhbcjkbda的博客
08-11 320
做前后端分离项目的小伙伴们应该知道，前后端的交互靠的是Ajax从前端向后端请求提交各种数据，从而完成各种功能，而且请求的方式大致可以分为Get请求和Post请求两种，那么这两种请求有什么区别呢？1.Get请求和Post请求的适用情景不一样，Get请求一般适用的情景是前端向后端请求数据，Get请求会将收集到的参数数据添加到请求指定的URL中，且在URL中可见参数数据。所以Get请求传递的数据不应该太长，实际上Get请求传递的数据量不能大于2KB，且安全性较低。
AJAX的几种数据传输
在风雨中奔跑
11-13 5662
AJAX数据传输： 第一种传送方式：load
几种常用的Ajax技术
qq_32506555的博客
09-28 1257
Ajax是前端开发常用的知识点，今天我们就和大家一起来学习Ajax中常用的几种技术，一起来看看吧。      Ajax是一种与服务器通信而无需重载页面的方法。数据可以从服务器获取或者发给服务器。 Ajax和异步分不开，但是本文重点部分不是异步，而是对实现Ajax的技术进行总结。 我简要罗列一下几种常见的Ajax技术： 动态脚本
Ajax使用的技术
iteye_5722的博客
03-20 294
Ajax是XMLHttpRequest对象和JavaScript、XML、CSS、DOM等多种技术的组合。 其中，只有XMLHttpRequest对象是新技术，其他的均为已有技术。下面我们就对Ajax使用的技术进行简要介绍。 一 XMLHttpRequest对象 Ajax使用的技术中，最核心的技术就是XMLHttpRequest，它是一个具有应用程序接口的JavaScript对象，能够使用...
前端通过Ajax提交数据到服务器有以下几种方式
twins3520的博客
06-02 349
FormData格式数据：可以将表单数据封装成FormData格式，通过POST请求发送到服务器。JSON格式数据：可以将数据封装成JSON格式，通过POST请求发送到服务器。XML格式数据：可以将数据封装成XML格式，通过POST请求发送到服务器。POST请求：将数据放在请求体中传递，适用于传输大量数据，例如表单提交。GET请求：通过URL传递参数，适用于传输少量数据，例如查询操作。DELETE请求：用于删除资源，需要传递被删除的资源ID等信息。PUT请求：用于更新资源，需要传递更新后的完整数据。
前端学习笔记005：数据传输 + AJAX + axios
Copcin的小站
10-16 2811
本文要学习的东西又多又杂，包含 JSON、XML、HTTP 协议、AJAX 请求、Promise、axios。（大家也可以看到我已经努力把题目缩到最短了（T_T））但这些知识对后面前端框架的学习是很有帮助的，所以马上开始~
jquery ajax传输数据
最新发布
03-29
其中一个常用的功能是使用jQuery的AJAX方法来传输数据。 使用jQuery的AJAX方法可以通过HTTP请求从服务器获取数据，也可以将数据发送到服务器。以下是使用jQuery AJAX传输数据的基本步骤： 1. 引入jQuery库：在HTML...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值