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 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
用于table内容排序
2006/07/21 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
js实现点击生成随机div
2020/01/16 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
10分钟学会js处理json的常用方法
2020/12/06 Javascript
RC4文件加密的python实现方法
2015/06/30 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
公司JAVA开发面试题
2015/04/02 面试题
2014年最新学校运动会广播稿
2014/09/17 职场文书
追悼会悼词大全
2015/06/23 职场文书
学校体育节班级口号
2015/12/25 职场文书
Linux中各个目录的作用与内容
2022/06/28 Servers