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 相关文章推荐
JavaScript 拖拉缩放效果
Dec 10 Javascript
JavaScript null和undefined区别分析
Oct 14 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
jsTree使用记录实例
Dec 01 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
Vue.js进阶知识点总结
Apr 01 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
vue实现菜单切换功能
May 08 Javascript
关于vue里页面的缓存详解
Nov 04 Javascript
vue项目中微信登录的实现操作
Sep 08 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
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
python 域名分析工具实现代码
2009/07/15 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
法人授权委托书范本
2014/09/17 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书