AJAX PHP无刷新form表单提交的简单实现(推荐)


Posted in PHP onSeptember 09, 2016

ajax.php:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<script language="javascript">
function saveUserInfo()
{
//获取接受返回信息层
var msg = document.getElementByIdx_x("msg");

//获取表单对象和用户信息值
var f = document.user_info;
var userName = f.user_name.value;
var userAge = f.user_age.value;
var userSex = f.user_sex.value;

//接收表单的URL地址
var url = "./ajax_output.php";

//需要POST的值,把每个变量都通过&来联接
var postStr  = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;

//实例化Ajax
//var ajax = InitAjax();


      var ajax = false;
     //开始初始化XMLHttpRequest对象
     if(window.XMLHttpRequest) { //Mozilla 浏览器
         ajax = new XMLHttpRequest();
         if (ajax.overrideMimeType) {//设置MiME类别
             ajax.overrideMimeType("text/xml");
         }
     }
     else if (window.ActiveXObject) { // IE浏览器
         try {
             ajax = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
             try {
                 ajax = new ActiveXObject("Microsoft.XMLHTTP");
             } catch (e) {}
         }
     }
     if (!ajax) { // 异常,创建对象实例失败
         window.alert("不能创建XMLHttpRequest对象实例.");
         return false;
     }
        
        
        

//通过Post方式打开连接
ajax.open("POST", url, true);

//定义传输的文件HTTP头信息
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//发送POST数据
ajax.send(postStr);

//获取执行状态
ajax.onreadystatechange = function() {
  //如果执行状态成功,那么就把返回信息写到指定的层里
  if (ajax.readyState == 4 && ajax.status == 200) {
   msg.innerHTML = ajax.responseText;
  }
}
alert (userName);
}
</script>
<body >
<div id="msg"></div>
<form name="user_info" method="post" action="">
姓名:<input type="text" id="user_name"name="user_name" /><br />
年龄:<input type="text" name="user_age" /><br />
性别:<input type="text" name="user_sex" /><br />

<input type="button" value="提交表单" onClick="saveUserInfo()">
</form>

</body>

 ajax_output.php:

<?php

   $username = $_POST['user_name'];
   $userage = $_POST['user_age'];
   $usersex = $_POST['user_sex'];
  echo "$username <br>";
  echo "$userage <br>";
  echo "$usersex <br>";

  $db = new mysqli('localhost','root','123456','test');
  if(!$db){
  echo "连接失败!";
  }
  $db->query("set names utf8");
  $query = "insert into userinfo(uname,uage,usex) values ('".$username."','".$userage."','".$usersex."')";
  $result = $db->query($query);
  if ($result){
  echo "上传成功!";
  }
  else {
  echo "失败!";
  }
  $db->close();

?>

以上这篇AJAX PHP无刷新form表单提交的简单实现(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
以文本方式上传二进制文件的PHP程序
Oct 09 PHP
PHP 采集程序中常用的函数
Dec 09 PHP
php自动注册登录验证机制实现代码
Dec 20 PHP
php图片加水印原理(超简单的实例代码)
Jan 18 PHP
控制PHP的输出:缓存并压缩动态页面
Jun 11 PHP
PHP制作图形验证码代码分享
Oct 23 PHP
win10环境PHP 7 安装配置【教程】
May 09 PHP
php中文字符串截取多种方法汇总
Oct 06 PHP
visual studio code 调试php方法(图文详解)
Sep 15 PHP
PHP封装XML和JSON格式数据接口操作示例
Mar 06 PHP
如何在centos8自定义目录安装php7.3
Nov 28 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
Aug 11 PHP
PHP实现的网站目录扫描索引工具
Sep 08 #PHP
php操作xml并将其插入数据库的实现方法
Sep 08 #PHP
php添加数据到xml文件的简单例子
Sep 08 #PHP
Yii2中事务的使用实例代码详解
Sep 07 #PHP
PHP模糊查询的实现方法(推荐)
Sep 06 #PHP
浅谈PHP中的数据传输CURL
Sep 06 #PHP
PHP实现页面静态化的超简单方法
Sep 06 #PHP
You might like
PHP与已存在的Java应用程序集成
2006/10/09 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
php中使用GD库做验证码
2016/03/31 PHP
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
js中数组常用方法总结(推荐)
2019/04/09 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
使用python开发vim插件及心得分享
2014/11/04 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
电子商务专业个人的自我评价
2013/12/19 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书