一.jQuery+Ajax表单数据序列化

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <p id="results"><b>Results: </b> </p>
 9     <form>
10         <p>地址</p>
11         <select name="address">
12             <option>Guangdong</option>
13             <option>Beijing</option>
14             <option>Shanghai</option>
15         </select>
16         <p>爱好</p>
17         <input type="checkbox" name="hobby" value="足球"/> 足球
18         <input type="checkbox" name="hobby" value="蓝球" checked="checked"/> 蓝球
19         <p>性别</p>
20         <input type="radio" name="sex" value="male" checked="checked"/> 男
21         <input type="radio" name="sex" value="female"/> 女
22         <input type="radio" name="sex" value="保密"/> 保密
23     </form>
24 </body>
25 </html>
26 <script src="lib/jquery-1.12.2.js"></script>
27 <script>
28     // serialize 序列表表单数据
29     // 返回结果：address=Guangdong&hobby=蓝球&sex=male
30     //  序列化表单工作原理：
31     //      1. 找到表单分区里面有name属性的表单项，
32     //      2. 获取每一个name的值
33     //      3. 把name属性和对应的值拼接成字符串
34     console.log( $("form").serialize() );
35     $("#results").append( $("form").serialize() );
36 </script>

02_JQ_AJAX_post.php

 1 <?php
 2 /**
 3  * Created by qinpeizhou.
 4  * Date: 2017/11/10
 5  * Time: 15:03
 6  * Email : 1031219129@qq.com
 7  */
 8  header('Content-Type:text/html;charset=utf-8;');
 9 // echo 'Success，你成功的从PHP服务器拿到了数据';
10 $uName = $_POST['userName'];
11 $users = ["jack",'rose','tom'];
12 $isExist = in_array($uName,$users);
13 if($isExist) {
14    echo "该帐号已注册，换一个试试";
15 }else{
16    echo "你可以注册";
17 }

表单序列化例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.tips{color:red;}</style>
</head>
<body>
<form action="02_JQ_AJAX_post.php" method="POST" id="loginForm"><p class="tips" id="tips"></p>用户名<input type="text" name="userName" id="userName"/>密码<input type="password" name="userPwd" id="userPwd"/><input type="submit" id="submitBtn" value="登录">
</form>
</body>
</html>
<script src="lib/jquery-1.12.2.js"></script>
<script>/* $('#userName').blur(function () {/!***  $.ajax({});*    url 服务器地址* *!/var txt = $(this).val();$.ajax({type:'GET',url:'01_JQ_AJAX_get.php',data:{userName : txt},success : function (res) {$('#tips').html(res);}});});*/$('#submitBtn').click(function () {var userText = $('#userName').val();if($.trim(userText).length==0){$('#tips').html("用户名不能为空");}$.ajax({type: 'POST',url: '02_JQ_AJAX_post.php',data: $('#loginForm').serialize(), // 表单数据序列化success: function (res) {$("#tips").html( res );}});// 阻止提交按钮的默认行为return false;});
</script>

转载于:https://www.cnblogs.com/mrszhou/p/7820427.html

Ajax--serialize应用表单数据序列化相关推荐

ajax提交form表单到php,ajax如何提交form表单数据？ajax提交form表单数据的方法介绍...
对于form表单数据的提交,我们一般都会想到使用ajax提交,那么,ajax如何来提交form表单数据呢?接下来的这篇文章就来给大家来介绍关于ajax提交form表单数据方法,有需要的伙伴可以参考一下 ...
JQuery Ajax传递整个表单数据方法
jQuery提倡写更少的代码,做更多的事.jQuery的Ajax是我们经常用到的一个方法,当需要传递的数据比较少时我们可以一一的整理成 url字符串然后传递给服务器,接受返回的数据.当数据比较多时, ...
php yii2自动给值,Yii2基于Ajax自动获取表单数据的方法
本文实例讲述了Yii2基于Ajax自动获取表单数据的方法.分享给大家供大家参考,具体如下: 这里有两张表,表结构如下,locations表存放的省份和邮编等信息,两张表的model和curd均使用gi ...
ajax获取表单php,Yii2基于Ajax自动获取表单数据的方法
本文实例讲述了Yii2基于Ajax自动获取表单数据的方法.分享给大家供大家参考,具体如下: 这里有两张表,表结构如下,locations表存放的省份和邮编等信息,两张表的model和curd均使用gi ...
ajax异步提交 java_jquery ajax异步提交表单数据的方法
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
django（7）modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用...
一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts importr ...
通过ajax提交form表单数据的几种方式
一.FormData方法作用: 模拟HTML表单,相当于将HTML表单映射成表单对象,自动将表单对象中的数据拼接成请求参数的格式. 异步上传二进制文件使用在原生ajax中的使用 <form ...
ajax提交form表单数据详解
话不多说,首先我们定义一个form标签,在form标签里面定义一些文本框,具体代码如下: <form id="classForm" onsubmit="return ...
ajax提交Form表单数据到后台
先引入jQuery. <script type="text/javascript" src="js/jquery-1.12.3.js"></s ...

Ajax--serialize应用表单数据序列化

02_JQ_AJAX_post.php

表单序列化例子：

Ajax--serialize应用表单数据序列化相关推荐

最新文章

热门文章