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 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
Openlayers绘制地图标注
Sep 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
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
javascript中的几个运算符
2007/06/29 Javascript
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
Python调用C语言开发的共享库方法实例
2015/03/18 Python
python魔法方法-自定义序列详解
2016/07/21 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
简历中个人自我评价分享
2014/03/15 职场文书
团队精神口号
2014/06/06 职场文书
导游词之临安白水涧
2019/11/05 职场文书
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL