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 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
iview table高度动态设置方法
Mar 14 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 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 $_FILES函数详解
2011/03/09 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
javascript中xml操作实现代码
2011/11/21 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
纯JS实现轮播图
2017/02/22 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
python简单获取数组元素个数的方法
2015/07/13 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python zip()函数用法实例分析
2018/03/17 Python
Python装饰器简单用法实例小结
2018/12/03 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
华为慧通面试题
2012/09/11 面试题
介绍一下write命令
2014/08/10 面试题
茶叶店创业计划书范文
2014/01/19 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
求职信怎么写范文
2014/05/26 职场文书
承诺书范本
2015/01/21 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书