php+jquery+ajax+json的一个最简单实例

最新推荐文章于 2021-07-23 09:33:49 发布
最新推荐文章于 2021-07-23 09:33:49 发布
阅读量1.9k 收藏 2
点赞数 2
分类专栏： AJAX php JQuery 文章标签： ajax json jquery ajax
php 同时被 3 个专栏收录
135 篇文章 1 订阅
订阅专栏
JQuery
35 篇文章 0 订阅
订阅专栏
AJAX
16 篇文章 0 订阅
订阅专栏

php+jquery+ajax+json的一个最简单实例


html页面： 
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
 $(function(){
  $("#send").click(function(){
   var cont = $("input").serialize();
   $.ajax({
    url:'ab.php',
    type:'post',
    dataType:'json',
    data:cont,
    success:function(data){
     var str = data.username + data.age + data.job;
     $("#result").html(str);
    }
   });
  });  
 });
</script>
</head>
<body>
 <div id="result">一会看显示结果</div>
 <form id="my" action="" method="post">
  <p><span>姓名：</span><input type="text" name="username" /></p>
  <p><span>年龄：</span><input type="text" name="age" /></p>
  <p><span>工作：</span><input type="text" name="job" /></p>
 </form>
 <button id="send">提交</button>
</body>
</html>
php页面： 
<?php
header("Content-type:text/html;charset=utf-8");
$username = $_POST['username'];
$age = $_POST['age'];
$job = $_POST['job'];
$json_arr = array("username"=>$username,"age"=>$age,"job"=>$job);
$json_obj = json_encode($json_arr);
echo $json_obj;
?>
-----------2013.1.11 补充---------------------
使用post方式 
<script type="text/javascript">
 $(function(){
  $("#send").click(function(){
   var cont = {username:$("input")[0].value,age:$("input")[1].value,job:$("input")[2].value};
   var url = 'ab.php';
   $.post(url,cont,function(data){
    var res = eval("(" + data + ")");//转为Object对象
    var str = res.username + res.age + res.job;
    $("#result").html(str);
   });
  });  
 });
</script>


jQuery ajax - serialize() 方法

jQuery Ajax 参考手册

实例

输出序列化表单值的结果：

$("button").click(function(){
  $("div").text($("form").serialize());
});

亲自试一试

定义和用法

serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。

您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

语法

$(selector).serialize()

详细说明

.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

表单元素有几种类型：

<form>
  <div><input type="text" name="a" value="1" id="a" /></div>
  <div><input type="text" name="b" value="2" id="b" /></div>
  <div><input type="hidden" name="c" value="3" id="c" /></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f" />
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g" />
  </div>
</form>

.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 <input>, <textarea> 以及 <select>。不过，选择 <form> 标签本身进行序列化一般更容易些：

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

输出标准的查询字符串：

a=1&b=2&c=3&d=4&e=5

注释：只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。



摘自:http://www.w3school.com.cn/jquery/ajax_serialize.asp

http://phpway.blog.163.com/blog/static/212112005201301153512311/

Houzhyan
关注
专栏目录
jquery将一个表单序列化为一个对象的方法
12-10
代码如下: var aa=function(form){ var o={}; $.each(form.serializeArray(),function(index){ if(o[this[‘name’]]){ o[this[‘name’]] = o[this[‘name’]]+”,”+this[‘value’]; }else{ o[this[‘name’]] = this[‘value’]; } }); return o; } 只要传递一个form对象进去就可以.经过方法处理就可以返回一个对象.例如console.info(aa($(“#myForm”)));可以把这个在火狐浏览器里面试试效
JSP+jquery使用ajax方式调用json的实现方法
01-08
本文实例讲述了JSP+jquery使用ajax方式调用json的实现方法。分享给大家供大家参考，具体如下： 前台： [removed][removed] [removed] //test function test(uid) { if(confirm(确定该用户操作+uid+吗？&#41...
jQuery ajax - serialize() 方法
Java高知社区
10-28 2328
jQuery ajax - serialize() 方法 jQuery Ajax 参考手册 实例 输出序列化表单值的结果： $("button").click(function(){ $("div").text($("form").serialize()); }); 亲自试一试 定义和用法 serialize() 方法通过序列化表单值，创建 URL
serialize的用法
博客小主
10-25 690
定义和用法 serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。 您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。 $("button").click(function(){ $("div").text($("form").serialize()); }
jQuery 中ajax 的 serialize() 方法
卷心菜投手
10-17 671
示例代码： &lt;form&gt; &lt;div&gt;&lt;input type="text" name="a" value="1" id="a" /&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="text" name="b" value=&q
jQuery序列化表单成对象
红尘浪子的专栏
01-13 1229
在使用easyui的datagrid组件时，在查询时传递的查询参数是对象类型，为了方便，扩展了jquery中的序列化方法，调用该方法，可以将表单的所有数据序列化 $.fn.serializeObject=function(){       var obj=new Object();       $.each(this.serializeArray(),function(index,p
使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页
10-23
本文通过实例详细介绍了如何使用Jquery、Ajax和Json实现数据的异步分页功能。后端通过Java生成Json格式数据，前端则通过Jquery处理Ajax请求和分页逻辑，展示数据。整个过程涉及前后端的协作，页面渲染和用户交互的...
jQuery+json实现的简易Ajax调用实例
10-23
8. **jQuery的$.getJSON方法**：`$.getJSON`是一个便捷的jQuery方法，用于执行GET请求并处理JSON格式的响应数据。该方法的三个参数分别是要请求的URL、请求参数以及一个回调函数，当请求成功完成后会调用该回调函数...
php+ajax+json 详解及实例代码
10-20
本篇文章将深入解析 PHP、AJAX 和 JSON 的基本原理，并提供一个简单的实例，帮助初学者理解它们如何协同工作。 首先，让我们了解这三个概念的基础： 1. PHP（Hypertext Preprocessor）是一种服务器端的脚本语言，...
JSON+js+jquery+ajax基础.zip
07-05
它是基于JavaScript的一个子集，但JSON是独立于语言的，具有数据格式简单、易于读写的特点。在Web开发中，JSON常用于在服务器与客户端之间传输数据，尤其是在AJAX（Asynchronous JavaScript and XML）技术中。 ...
jQuery ajax serialize()方法的使用以及常见问题解决
12-11
使用ajax时，常常需要拼装input数据为’name=abc&sex=1’这种形式，用JQuery的serialize方法可以轻松的完成这个工作! jQuery ajax – serialize() 方法定义和用法 serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。 您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。 jQuery ajax – serialize() 方法语法 $(selector).serialize() jQuery ajax – ser
ajax方法 serialize()方法
m0_37985967的博客
04-12 756
serialize方法 作用：将表单中的数据自动拼接成字符串类型的参数 var params= $('#form').serialize() 该方法可以将表单控件中的字符串转换成以下格式 //name = zhangsan&age =30 在script中我们可以使用FormData对象进行序列化，FromData可以解决这个问题，但是这个方法是html5提供的方法，在老版本的浏览器是不好使的， 这个方法和FormData是没法比较的，这个方法仅仅只是拼接字符串的请求参数，没有其他的功能。
Jquery 将表单序列化为Json对象
我想我是海 冬天的大海 心情随风轻摆
07-23 606
(function ($) { $.fn.serializeJson = function () { var serializeObj = {}; var array = this.serializeArray(); var str = this.serialize(); $(array).each(function () { if (serializeObj[this.name]) { .
JQuery中serialize()、serializeArray()和param()方法
热门推荐
夜凉如水
02-05 1万+
下面是服务器端的jsp代码： <% request.setCharacterEncoding("UTF-8"); String username = request.getParameter("username"); String content = request.getParameter("content"); out.println(" "+username+" : "+
jquery序列化表单
有花堪折直须折，莫待无花空折枝。
03-01 591
譬如提交一个登陆的from表单： jsp中用到了两个属性：表单的id（用于定位）、input的name（用于获取输入框里的值） $("#form").serialize()这个就是表单序列化的代码。 ajax提交，咱们看看控制台： 接收到了，咱们在看看后台： 很棒，js代码很简约，简化了通过id定位取值的步骤。 ...
ajax的serialize()方法
07-26 135
自己看吧，超级简单，就不用挨个获取表单名称和值对装在Json里往php传了，直接传个form就可以。 【HTML】 <form method="post" id="form1"> 　　Order: <input type="text" name="order" value=""> 　　Name: <input type="text" name="...
jQuery 表单序列化JSON数据
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
06-10 582
在线体验：http://www.jq22.com/jquery-info18675 源码如下： /* jQuery类级别插件扩展 */ /* * obj：jQ表单对象 */ ;$.extend({ serializeJSON: function(obj) { var formArr = obj.serializeArray(); var formOb...
使用JQuery表单数据序列化 -- 自定义
ypf_1996的博客
05-10 365
使用JQuery表单数据序列化 – 自定义 关于 var jsonuserinfo = $('#form1').serializeObject(); 这句话报错表单序列化为对象报错加入serializeObject方法即可解决 $.prototype.serializeObject = function () { var a,o,h,i,e; ...
Ajax表单序列化serialize
qq_42388853的博客
08-26 162
Ajax表单序列化serialize 这里servlet先准备个方法： protected void jquerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("UTF-8"); resp.setContentType("text/html; charset=UTF-8");
PHP+jQuery AJAX传递JSON数据简单教程
“php基于jquery的ajax技术传递json数据简单实例” 在Web开发中，AJAX（Asynchronous JavaScript and XML）技术被广泛用于实现页面的无刷新更新，提高用户体验。本实例将详细介绍如何在PHP和jQuery环境下，通过AJAX...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值