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 相关文章推荐
实例:尽可能写友好的Javascript代码
Oct 09 Javascript
js可突破windows弹退效果代码
Aug 09 Javascript
DWR Ext 加载数据
Mar 22 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
js瀑布流布局的实现
Jun 28 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/10/09 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
php自定义分页类完整实例
2015/12/25 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
python实现百度语音识别api
2018/04/10 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
法警的竞聘演讲稿
2014/01/02 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
出纳工作检讨书
2014/10/18 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
小学班主任研修日志
2015/11/13 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
php png失真的原因及解决办法
2021/11/17 PHP