jquery中$.post()方法的简单实例


Posted in Javascript onFebruary 04, 2014

在jqery中有这样一个方法,$.post()下面就这个方法做一个简单的实例:

jQuery.post( url, [data], [callback], [type] ) :
使用POST方式来进行异步请求

参数:

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

1.html页面(index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript" src=\'#\'" /jquery-1.3.2.js"></script>
<script language="javascript">
function checkemail(){  if($('#email').val() == ""){
    $('#msg').html("please enter the email!");
    $('#email').focus;
    return false;
  }
  if($('#address').val() == ""){
    $('#msg').html("please enter the address!");
    $('#address').focus;
    return false;
  }
  ajax_post();
}

function ajax_post(){
  $.post("action.php",{email:$('#email').val(),address:$('#address').val()},
  function(data){
    //$('#msg').html("please enter the email!");
    //alert(data);
    $('#msg').html(data);
  },
  "text");//这里返回的类型有:json,html,xml,text
}
</script>
</head>
<body>
<form id="ajaxform" name="ajaxform" method="post" action="action.php">
    <p>
    email<input type="text" name="email" id="email"/>
    </p>
    <p>
    address<input type="text" name="address" id="address"/>
    </p>
    <p id="msg"></p>
    <p>    
        <input name="Submit" type="button" value="submit" onclick="return checkemail()"/>
    </p>
</form>
</body>
</html>

2.php页面(action.php)
<?php
$email = $_POST["email"];
$address = $_POST["address"];
//echo $email;
//echo $address;
echo "success";
?>

说明:当点击按钮时,注意按钮现在的类型是button.在不使用$.post()方法时,按钮类型是submit,这样submit提交form里的数据,采用post方法传递到页面action.php,这时在页面action.php中就能接受到传过来的数据。当采用$.post方法时,我们在函数ajax_post()方法中其实就是使用了post的方法。(要引用jquery库文件)
Javascript 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
jQuery 使用手册(七)
Sep 23 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 #Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 #Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 #Javascript
解决json日期格式问题的3种方法
Feb 02 #Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 #Javascript
简单的JavaScript互斥锁分享
Feb 02 #Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 #Javascript
You might like
很实用的一个完整email发送程序
2006/10/09 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
PHP模块化安装教程
2016/06/01 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
jquery实现动态画圆
2014/12/04 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
Python选课系统开发程序
2016/09/02 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
教育学专业毕业生的自我评价
2013/11/21 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
保研专家推荐信范文
2015/03/25 职场文书
董事长秘书工作总结
2015/08/14 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL