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 相关文章推荐
input输入框的自动匹配(原生代码)
Mar 19 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
Seajs源码详解分析
Apr 02 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 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安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
Move.js入门
2017/02/08 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
ORACLE十问
2015/04/20 面试题
师范生实习个人的自我评价
2013/09/28 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
工程项目合作意向书
2015/05/08 职场文书
干部培训简讯
2015/07/20 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS