额 为啥用这个 不用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. 
								
  2. ASP.NET MVC 网站开发总结（五）——Ajax异步提交表单之检查验证码
		
    首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...
    
		
    3. 
						
  3. jquery ajax异步提交表单数据
		
    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
    
		
    4. 
						
  4. 使用ajax异步提交表单
		
    虽然这篇文章的标题是提交表单,但是主要的难点在于使用ajax提交文本域的内容, 在工作中的经常会需要ajax跨域的问题,通常的需求使用jsonp就可以得到解决,但是当前项目中有一个图片服务器,客户端需 ...
    
		
    5. 
						
  5. MVC之AJAX异步提交表单
		
    第一种用法: 在MVC中,依然可以使用ajax校验,跟在WebForm中的使用时一样的,唯一的区别就是将以前的URL路劲改为访问控制器下的行为 前台 <html> <head> ...
    
		
    6. 
						
  6. 使用AJAX异步提交表单的几种方式
		
    方式一 手工收集所有的用户输入,封装为大的“k1=v1&k2=v2…”键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', u ...
    
		
    7. 
						
  7. axios异步提交表单数据的不同形式
		
    踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的权限接口时发现都正常,但是使用vue+ ...
    
		
    8. 
						
  8. ajax方式提交表单数据并判断当前注册用户是否存在
		
    项目的目录结构 源代码: regservlet.java package register; import java.io.IOException; import java.io.PrintWrite ...
    
		
    9. 
						
  9. Vue axios 中提交表单数据(含上传文件)
		
    伟大的画家都是先从模仿开始 的,我写的不好,很多还是抄袭,就是想提高自己的水平,没准坚持下来,我就变成一个厉害的角色了呢?
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 在Linux最小系统上编译运行第一个helloworld程序
			
    一.安装和使用SSH软件 1.安装SSH 软件 1)SSH 软件压缩包可以在网盘下载,下载后解压,进入解压出来的文件夹,如下图. 2)单击上图中的“SSHSecureShellClient-3.2.9 ...
    
			
    2. 
						
  2. Js动态获取iframe子页面的高度总结
			
    问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 给元素设置高度 这方法是用在父级页面里的,通过获取子级页面的高度给iframe设置 ...
    
			
    3. 
						
  3. MyEclipse启动慢的办法
			
    禁用myeclipse updating indexes MyEclipse 总是不停的在 Update index,研究发现Update index...是Maven在下载更新,但很是影响myecl ...
    
			
    4. 
						
  4. 【C解毒】滥用变量
			
    见:[C解毒]滥用变量
    
			
    5. 
						
  5. C# property简介
			
    property专属的关键字就只有value.其他的性质实现都是用其他的方法的组合.property通过对一系列方法的灵活组合应用,能够间接地对私有的成员变量进行赋值操作和得到值.因为是间接地,私有变 ...
    
			
    6. 
						
  6. Cordova for Android(Windows)环境配置
			
    PS:注意事项 一些坑在此声明: 1.安装Eclipse后,记得设置各项编码格式为utf-8 请移步:http://www.blogjava.net/xiaomage234/archive/2014/ ...
    
			
    7. 
						
  7. 配置jsp开发环境
			
    一.安装jdk(http://pan.baidu.com/s/1sjk9a2p) 二.配置java环境变量 安装好后,配置环境变量:计算机——右击——属性——高级系统设置设置——环境变量 系统变量(没 ...
    
			
    8. 
						
  8. Web_add_header
			
    如果你发现所有的HTTP send请求都缺少头数据包,在脚本中的开头添加web_add_auto_header(”XXXXX“,”yyyy“);随着web_add_auto_header的添加,你不需 ...
    
			
    9. 
						
  9. zigbee学习之路(四):按键控制(中断方式)
			
    一.前言 通过上次的学习,我们学习了如何用按键控制led,但是在实际应用中,这种查询方式占用了cpu的时间,如果通过中断控制就可以解决这个问题,我们今天就来学习按键控制的中断方式. 二.原理分析 传统 ...
    
			
    10. 
						
  10. Viking Village维京村落demo中的地面积水效果
			
    效果如下: 似乎是通过高光贴图实现的,查找后发现具体在这: 它使用了基于Standard的TerrainSurface自定义Shader,关闭该帖图后效果消失: 这个TerrainSurfaceSha ...
    
			
    11.