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 获取表单元素里面的值示例代码
Jul 28 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 Javascript
JS中箭头函数与this的写法和理解
Jan 14 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
jQuery 注意事项 与原因分析
2009/04/24 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
深入理解Python中的super()方法
2017/11/20 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
基于python实现操作redis及消息队列
2020/08/27 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
个人找工作自荐信格式
2013/09/21 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
体育教师自我鉴定
2014/02/12 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
幼儿教师个人总结
2015/02/05 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android