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 相关文章推荐
用JS实现的一个include函数
Jul 21 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 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
第十一节--重载
2006/11/16 PHP
php中fsockopen用法实例
2015/01/05 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
PHP闭包函数详解
2016/02/13 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
google地图的路线实现代码
2009/08/20 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
python实现机器学习之元线性回归
2018/09/06 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
python中实现栈的三种方法
2020/12/19 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
心理健康教育制度
2014/01/27 职场文书
党建工作经验交流材料
2014/05/25 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
MySQL七种JOIN类型小结
2021/10/24 MySQL