额 为啥用这个 不用form呢,因为这个效率高,而且在浏览器中运行程序的时候如果出现bug的话,页面不会显示显示错误信息,提高了用户的体验度。

那么,就来看看把,先给数据库表截个图哈

然后写项目被 我的目录结构

然后 看代码呗

conn.php

 <?php

$conn=@mysql_connect("localhost","root","root")or die("mysql连接失败!");
@mysql_select_db("exercisephp",$conn)or die("db连接失败".mysql_error());
mysql_query('SET NAMES UTF8')or die("字符集设置错误");
?> 然后index.php
<?php
header("Content-tppe:text.html;charset:utf-8");
include("conn.php");
?> <html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax提交form表单</title>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script> $(function() {
$("#sub").click(function() {
// 处理表单验证和交给后台处理的逻辑
var username = $("#username").val();
var pwd=$("#pwd").val();
var email=$("#email").val();
var dataString = '&username='+ username + '&email=' + email + '&pwd=' + pwd;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "tijiao.php", data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2></h2>")
.append("<p></p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='image/pic2.jpg' />");
});
}
});
return false;
});
}); $("img").click(function(){ $("#checkmark").hide(); });
</script>
</head>
<body>
<div class="loginbar">
<div id="message"></div>
<ul>
<li><span>用户名:</span><span><input type="text" name="username" id="username"/></span></li>
<li><span>密码&nbsp;&nbsp;:</span><span><input type="text" name="pwd" id="pwd"/></span></li>
<li><span>邮箱&nbsp;&nbsp;:</span><span><input type="text" name="email" id="email"></span></li>
<li><span><input type="submit" id="sub" name="sub" value="提交"/></span><span><input type="button" name="clears" id="clears" value="重置"/></span></li>
</ul>
</div> </body>
</html> 最后tijiao.php
<?php
error_reporting(0);
header("Content-type:text/html;charset=utf-8");
include("conn.php"); $username=$_POST['username'];
$pwd=$_POST['username'];
$email=$_POST['email'];
$sql="insert into ajaxcheck(username,pwd,email) values('$username','$pwd','$email')";
$query=mysql_query($sql); ?> 额 还有个css 你们也可以粘贴上
.loginbar{border:1px solid red;width:500px;height:500px;margin:0 auto;z-index:1;}
.loginbar li{list-style:none;}
#message{margin-top:100px;width:300px;height:300px;z-index:9999;position: absolute;} 就这些把 必须好使,js ajax 有些浏览器 已经不兼容了 所以jquery ajax 提交form表单才是王道哈。

												

使用ajax异步提交表单数据(史上最完整的版本)的更多相关文章

  1. jquery ajax异步提交表单数据的方法

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  2. ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码

    首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...

  3. jquery ajax异步提交表单数据

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  4. 使用ajax异步提交表单

    虽然这篇文章的标题是提交表单,但是主要的难点在于使用ajax提交文本域的内容, 在工作中的经常会需要ajax跨域的问题,通常的需求使用jsonp就可以得到解决,但是当前项目中有一个图片服务器,客户端需 ...

  5. MVC之AJAX异步提交表单

    第一种用法: 在MVC中,依然可以使用ajax校验,跟在WebForm中的使用时一样的,唯一的区别就是将以前的URL路劲改为访问控制器下的行为 前台 <html> <head> ...

  6. 使用AJAX异步提交表单的几种方式

    方式一 手工收集所有的用户输入,封装为大的“k1=v1&k2=v2…”键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', u ...

  7. axios异步提交表单数据的不同形式

    踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的权限接口时发现都正常,但是使用vue+ ...

  8. ajax方式提交表单数据并判断当前注册用户是否存在

    项目的目录结构 源代码: regservlet.java package register; import java.io.IOException; import java.io.PrintWrite ...

  9. Vue axios 中提交表单数据(含上传文件)

    伟大的画家都是先从模仿开始 的,我写的不好,很多还是抄袭,就是想提高自己的水平,没准坚持下来,我就变成一个厉害的角色了呢?

随机推荐

  1. 快速激活JetBrains PhpStorm WebStorm系列产品

    从官方网站下载正版PhpStorm 安装后,注册时选择“License server” 输入“http://idea.lanyus.com/” (不带双引号,后面的斜杠要带上) 完成 恭喜你 激活Je ...

  2. 一款bootstrap树形js

    http://www.htmleaf.com/Demo/201502141380.html

  3. JVM参数设置、分析(转发)

    JVM参数的含义 实例见实例分析 参数名称 含义 默认值   -Xms 初始堆大小 物理内存的1/64(<1GB) 默认(MinHeapFreeRatio参数可以调整)空余堆内存小于40%时,J ...

  4. 关于img 403 forbidden的一些思考

    网页中经常需要显示图片给用户看,对网站本身来说有的图片是从本地图片服务器来的,但是一旦数量多了以后,磁盘空间又是一个问题. 所以有时就希望显示其他网站的Image,直接把其他网站的图片显示在我的网站上 ...

  5. aliyun的yum源(国内速度极快)

    公网(家里宽带下载速度达到1-3.5M): http://mirrors.aliyun.com/repo/Centos-6.repo 内网(购买的阿里云主机可以访问): http://mirrors. ...

  6. redis安装与基本配置

    获取下载包 wget http://download.redis.io/releases/redis-2.8.24.tar.gz 解压和编译 tar -zxvf redis-2.8.24.tar.gz ...

  7. [问题2014A12] 复旦高等代数 I(14级)每周一题(第十四教学周)

    [问题2014A12]  设 \(A,B\) 是 \(n\) 阶方阵且满足 \(AB=BA=0\), \(\mathrm{r}(A)=\mathrm{r}(A^2)\), 证明: \[\mathrm{ ...

  8. 【Unity3D游戏开发】NGUI之多分辨率下完美分布式协同开发 (五)

    NGUI多分辨率下完美分布式协同开发:不同分辨率下相对于屏幕坐标的Perfab数据不再丢失 NGUI多分辨率下完美分布式协同开发不同分辨率下相对于屏幕坐标的Perfab数据不再丢失 开发问题 原因分析 ...

  9. Spring 框架下Controller 返回结果在EasyUI显示

    这几天弄了一下java下的在后台返回数据到jsp页面上的显示: 总结一下: 首先后台方面: @RequestMapping(value="/searchByUserName") @ ...

  10. CSSOM之getboundingclientrect和getclientrects

    TextRectangle 对于文本对象,W3C提供了一个 TextRectangle 对象,这个对象是对文本区域的一个解释. 对于 i,span,em等display 是inline的标签,在书写文 ...