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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
vue实现倒计时功能
Mar 24 Vue.js
用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 获取select下拉列表框的值
2010/05/08 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
AngularJS语法详解
2015/01/23 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
Python微信库:itchat的用法详解
2017/08/14 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
EJB3推出JPA的原因
2013/10/16 面试题
家长会邀请书
2014/01/25 职场文书
优秀员工评语
2014/02/10 职场文书
党员民主评议总结
2014/10/20 职场文书
军训个人总结
2015/03/03 职场文书
汉语拼音教学反思
2016/02/22 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫