jQuery中get方法用法分析


Posted in Javascript onDecember 07, 2016

本文实例讲述了jQuery中get方法用法。分享给大家供大家参考,具体如下:

参数:url,[data],[callback],[type]

url 待载入页面的URL地址。
data 待发送 Key/value 参数。
callback 载入成功时回调函数。
type 返回内容格式,xml, html, script, json, text, _default。

案例1

表单代码:

<form id="form1" action="#">
<p>评论:</p>
 <p>姓名: <input type="text" name="username" id="username" /></p>
 <p>内容: <textarea name="content" id="content" rows="2" cols="20"></textarea></p>
 <p><input type="button" id="send" value="提交"/></p>
</form>

待处理div代码:

<div class='comment'>已有评论:</div>
<div id="resText" >
</div>

jQuery代码:

<script type="text/javascript">
//<![CDATA[
 $(function(){
  $("#send").click(function(){
   $.get("get1.php", { 
      username : $("#username").val() , //传入参数
      content : $("#content").val() 
     }, function (data, textStatus){
      $("#resText").html(data); // 把返回的数据添加到页面上
     }
   );
  })
 })
//]]>
</script>

PHP代码:

<?php 
  header("Content-Type:text/html; charset=utf-8");
  echo "<div class='comment'><h6>{$_REQUEST['username']}:</h6><p class='para'>{$_REQUEST['content']}</p></div>";
?>

当用户点击send按钮时,触发click事件,对数据进行处理。主要传入两个参数,一个是用户名,一个是内容。这两个参数被传递到php页面。PHP页面处理完毕后,返回输入数据,get方法处理返回的数据。分析代码,可以看出,这数据,被写入了resText这个div层中。整个过程页面并没有刷新。很安静的处理了数据的传输。

案例2,以xml的格式处理数据

表单代码同上。

待处理div代码同上。

jQuery代码:

<script type="text/javascript">
//<![CDATA[
 $(function(){
  $("#send").click(function(){
   $.get("get2.php", { 
      username : $("#username").val() , 
      content : $("#content").val() 
     }, function (data, textStatus){
      var username = $(data).find("comment").attr("username");
      var content = $(data).find("comment content").text();
      var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
      $("#resText").html(txtHtml); // 把返回的数据添加到页面上
     });
  })
 })
//]]>
</script>

PHP代码:

<?php 
  header("Content-Type:text/xml; charset=utf-8");
  echo "<?xml version='1.0' encoding='utf-8'?>".
     "<comments>".
     "<comment username='{$_REQUEST['username'] }' >".
     "<content>{$_REQUEST['content']}</content>".
     "</comment>".
     "</comments>";
?>

jQuery传递参数是相同的,区别在于回调函数对数据处理的方式的不同。从PHP代码中可以看出数据是以xml的格式传入的。

jQuery处理xml就像处理html一样,可以获取属性的值,也可以获取节点的值,获取这些值之后,就可以进行一定的处理,返回到页面中去。

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

Javascript 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
屏蔽script注入小例子
Nov 12 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
js简单时间比较的方法
Aug 02 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
js实现随机数小游戏
Jun 28 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 #Javascript
jQuery删除当前节点元素
Dec 07 #Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 #Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 #Javascript
浅析js的模块化编写 require.js
Dec 07 #Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 #Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 #Javascript
You might like
小偷PHP+Html+缓存
2006/12/20 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
php DES加密算法实例分析
2019/09/18 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
Python 基础之字符串string详解及实例
2017/04/01 Python
Django自定义manage命令实例代码
2018/02/11 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
法律专业应届本科毕业生求职信
2013/10/25 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
商铺租赁意向书
2014/04/01 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js