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 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
js字符串操作方法实例分析
May 06 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 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邮件专题
2006/10/09 PHP
实用函数2
2007/11/08 PHP
PHP小程序自动提交到自助友情连接
2009/11/24 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
Javascript 事件流和事件绑定
2009/07/16 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
python微信公众号开发简单流程实现
2020/03/09 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
Python类及获取对象属性方法解析
2020/06/15 Python
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
三项教育活动实施方案
2014/03/30 职场文书
银行求职自荐信
2014/06/30 职场文书
无犯罪记录证明
2014/09/19 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL