php ajax异步提交表单,Ajax 异步请求表单提交+2018年4月11日16时20分

使用JQuery 的 $.Ajax 异步请求表单提交

Ajax 参数及步骤

// 1.请求资源

url:'admin/reg.php',

// 2.请求类型

type:'POST',

// 3.返回的数据格式

dataType:'JSON',

// 4.异步还是同步

async:true,

// 5.发送的数据,这里使用JSON格式

data:{

'username':$("#username").val()

},

// 6.回调方法

success:function(msg,status,xhr){}

PHP 代码部分：<?php

@header("Content-Type: text/html;charset=utf-8");

// 用数组模拟数据库数据

$nameList = ['admin','abc','php'];

// 获取注册页发送过来的用户名

$userName = $_POST['username'];

// 使用 in_array 判断数组中是否存在当前值

if(in_array($userName,$nameList)){

$status=0;

$reg_msg='用户名太抢手了,换一个';

// 将返回的数据转为json

echo json_encode([

'status'=>$status,

'reg_msg'=>$reg_msg

]);

}else {

$status=0;

$reg_msg='ok'; //此返回的状态可自定义, 如：1 成功 2 失败 3 已经被注册 等等

// 将返回的数据转为json

echo json_encode([

'status'=>$status,

'reg_msg'=>$reg_msg

]);

}

?>

JS 代码部分：主要使用JSON数据格式提交，将返回结果以动态添加标签插入元素之后进行提示，$(document).ready(function(){

$("#username").blur(function(){

// 开始验证账号

if($("#username").val().length>0){

// 账号不为空才能继续下面的邮箱,密码等

// 如果输入是沌数字则不允许

if(isNaN($("#username").val())){

// 使用 JQuery 中的 $.Ajax() 进行验证

$.ajax({

// 1.请求资源

url:'admin/reg.php',

// 2.请求类型

type:'POST',

// 3.返回的数据格式

dataType:'JSON',

// 4.异步还是同步

async:true,

// 5.发送的数据,这里使用JSON格式

data:{

'username':$("#username").val()

},

// 6.回调方法

success:function(msg,status,xhr){

// console.log(msg['tips'])

var msgbox = msg['reg_msg']  //得到服务器返回的 JSON 数据对像中的成功值

//判断返回的状态码 ok = 成功

if(msgbox=='ok'){

$('恭喜,用户名可用').appendTo($('#username').parent().before())

setTimeout(function(){

$(this).parent($('span').empty())

},2000)

}

}

})

}else{

//判断是否为纯数字

$(this).parent($('span').remove())

$('账号不能为纯数字!').appendTo($(this).parent().before())

$("#username").focus()

//2秒后提示清空

}

}else{

//如果输入的内容为空，则动态添加提示符

$('#msgs').remove()

$('账号不能为空!').appendTo($(this).parent().before())

$("#username").focus()

//2秒后提示清空

setTimeout(function(){

$('span').eq(0).empty()

},2000)

}

});

})

CSS 代码部分：.container{

width: 500px;

margin: auto;

border: 1px solid #ccc;

border-radius: 20px;

text-align: center;

margin-top: 20px;

}

HTML 代码部分：

实例

html>

用户注册

账号：

邮箱：

密码：

注册

运行实例 »

点击 "运行实例" 按钮查看在线实例

手抄：