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 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
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
在Windows版的PHP中使用ADO
2006/10/09 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
python命令行工具Click快速掌握
2019/07/04 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
python获取linux系统信息的三种方法
2020/10/14 Python
党员违纪检讨书
2014/02/18 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
读群众路线心得体会
2014/03/07 职场文书
父母寄语大全
2014/04/12 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
李强为自己工作观后感
2015/06/11 职场文书
焦点访谈观后感
2015/06/11 职场文书
学校远程教育工作总结
2015/08/11 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python