Ajax--serialize应用表单数据序列化
一.jQuery+Ajax表单数据序列化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="results"><b>Results: </b> </p>
<form>
<p>地址</p>
<select name="address">
<option>Guangdong</option>
<option>Beijing</option>
<option>Shanghai</option>
</select>
<p>爱好</p>
<input type="checkbox" name="hobby" value="足球"/> 足球
<input type="checkbox" name="hobby" value="蓝球" checked="checked"/> 蓝球
<p>性别</p>
<input type="radio" name="sex" value="male" checked="checked"/> 男
<input type="radio" name="sex" value="female"/> 女
<input type="radio" name="sex" value="保密"/> 保密
</form>
</body>
</html>
<script src="lib/jquery-1.12.2.js"></script>
<script>
// serialize 序列表表单数据
// 返回结果：address=Guangdong&hobby=蓝球&sex=male
// 序列化表单工作原理：
// 1. 找到表单分区里面有name属性的表单项，
// 2. 获取每一个name的值
// 3. 把name属性和对应的值拼接成字符串
console.log( $("form").serialize() );
$("#results").append( $("form").serialize() );
</script>
02_JQ_AJAX_post.php
<?php
/**
* Created by qinpeizhou.
* Date: 2017/11/10
* Time: 15:03
* Email : 1031219129@qq.com
*/
header('Content-Type:text/html;charset=utf-8;');
// echo 'Success，你成功的从PHP服务器拿到了数据';
$uName = $_POST['userName'];
$users = ["jack",'rose','tom'];
$isExist = in_array($uName,$users);
if($isExist) {
echo "该帐号已注册，换一个试试";
}else{
echo "你可以注册";
}
表单序列化例子：
<!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>
Ajax--serialize应用表单数据序列化的更多相关文章
- jQuery对的表单数据序列化和校验
jQuery对的表单数据序列化和校验 表单序列化 如果想让表单通过ajax异步提交,那么首先我们要通过js获取到每个表单中输入的值,如果表单项比较多的话,是一件很麻烦,很痛苦的事情,那么我们可以通过j ...
- jquery ajax异步提交表单数据的方法
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
- django（7）modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用
一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts import ...
- 使用ajax异步提交表单数据（史上最完整的版本）
额 为啥用这个 不用form呢,因为这个效率高,而且在浏览器中运行程序的时候如果出现bug的话,页面不会显示显示错误信息,提高了用户的体验度. 那么,就来看看把,先给数据库表截个图哈 然后写项目被 我 ...
- ajax提交完表单数据依然跳转的解决办法
1. 既然ajax提交数据,就把表单里面submit按钮换掉,因为触发submit他就会跳转页面 提交的时候他会先触发ajax 再触发submit的提交 2.如果确定了表单没有submit,那么把提交 ...
- ajax方式提交表单数据并判断当前注册用户是否存在
项目的目录结构 源代码: regservlet.java package register; import java.io.IOException; import java.io.PrintWrite ...
- ExtJs之Ajax模式的表单数据加载
简单: <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-e ...
- ajax提交form表单资料详细汇总
一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...
- jQuery ajax中使用serialize()方法提交表单数据示例
<form id="form"> 输入账号 :<input id="name" type="text" name=&quo ...
随机推荐
- PAT甲级——A1008 Elevator
The highest building in our city has only one elevator. A request list is made up with N positive nu ...
- java基础之二维数组-杨辉三角
首先呢你要知道什么是杨辉三角? 答:杨辉三角,是二项式系数在三角形中的一种几何排列. 简单的说一下就是两个未知数和的幂次方运算后的系数问题,比如(x+y)的平方=x的平方+2xy+y的平方,这样系数就 ...
- yii2-user 一个好用的用户扩展
最近使用yii2做了一个系统,涉及到了用户登录等等,之前是自己写的一套,后来要添加邮箱验证功能.有点懒,然后看到了yii2-user这个扩展.简单说下,毕竟自己研究也不深. http://yii2-u ...
- 牛客NOIP暑期七天营-提高组6
目录 A-积木大赛 题目描述 link 题解 代码 B-破碎的序列 题目描述 link 题解 C-分班问题 题目描述 link 题解 比赛链接 官方题解 A-积木大赛 题目描述 link 题解 标签: ...
- C++ 赋值函数为什么返回reference to *this?
赋值操作为什么要返回 reference to *this? 要弄清这个问题之前,先了解函数的返回值类型:返回值类型,返回引用类型 返回值类型:返回的是一个对象的副本. test operator= ...
- 在输入一个url到返回页面，中间发生了什么？
在浏览器中输入url,客户端先检查本地是否有对应的ip地址,如果找到了则返回响应的ip地址,如果没有找到则会请求DNS服务器,返回解析后的ip地址.应用层客户端发送HTTP请求,包括请求头和请求体.其 ...
- [vagrant]vagrant centos静态ip设置
vagrant 中使用的是public_network,而工作网络中,由于桥接了很多路由器,导致ip段位和本机的ip段位不在同一个局域网中 ifconfig之后的结果 [root@localhost ...
- 主从复制系列B
从服务器靠中继日志来接收从主服务器上传回来的日志.并依靠状态文件来记录已经从主服务器接收了哪些日志,已经恢复了哪些日志. 中继日志与二进制日志的格式相同,并且可以用mysqlbinlog读取.SQL线 ...
- JavaSE_05_反射
1.什么是反射? Java反射说的是在运行状态中,对于任何一个类,我们都能够知道这个类有哪些方法和属性.对于任何一个对象,我们都能够对它的方法和属性进行调用.我们把这种动态获取对象信息和调用对象方法的 ...
- Ajax的简单基础
什么是 AJAX ? AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行 ...