分享Ajax 提交表单数据到入库的全盘操作流程

*******php项目中当我们要对数据库进行写入操作时,有时会因为代码没有做防sql注入工作,导致各种不可预知的错误*******


1,index.htm 这是一个很简单的注册页面l  我这是以ajax形式提交数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RegisterForm</title>
<script type="text/javascript" src='jquery-1.3.1.js'></script>
</head>
<body>
<h1>This is a test form! </h1>
<font color="#8b0000"><table class='tb' border="0" cellpadding="5" cellspacing=0>
<form action='_process.php' method='post' enctype='multipart/form-data'>
<tr><td class="tdleft"><em>user  :</em></td><td><input type='text' id='name' name='name' value='' size=15/></td></tr>
<tr><td class="tdleft"><em>ages  : </em></td><td><input type='text' id='ages' name='ages' value='' size=15/></td></tr>
<tr><td class="tdleft"><em>pass  : </em></td><td><input type='password' id='password' name='password' value='' size=15/></td></tr>
<tr><td class="tdleft"><em>addr  : </em></td><td><input type='text' id='addr' name='addr' value='' size=15/></td></tr>
<tr><td class="tdleft"><em>email : </em></td><td><input type='text' name='email' id='email' value='' size=15/></td></tr>
<tr><td class="tdleft"><input type='button' value='register' id="but"/></td><td><input type='reset' value='reseting'/></td></tr>
</form>
</table></font>
<span id='msg' style='display:none'>正在加载... ...</span>
<p id="result" class=""></p>
<style type="text/css">
    body{text-align:center;}
        .error{color:red;}
    .tb{margin:0 auto;width:350px;height:200px;text-align:center;}
    .tdleft{width:150px;text-align:left;}        
</style>
<script type='text/javascript'>
        $("#but").click(function(){            
                var name = $.trim($("#name").val());                
        var ages = $.trim($("#ages").val());
                var pn = /^\d+$/;
                var addr = $.trim($("#addr").val());
                var pass = $.trim($("#password").val());
                var email = $.trim($("#email").val());
                var reg = /^[a-zA-Z0-9_]+@[a-zA-Z0-9_]+(\.[a-zA-Z]+)+$/gi;
                if(name.length==0){
                    alert("请认真填写姓名!");return false;
                } 
                if(ages.length==0){
                    alert("请填写年龄!");return false;
                }         
        if(!pn.test(ages)){
                    alert("请填写有效数字!");return false;
                }        
                if(pass.length==0||pass.length>6){
                    alert("请认真填写密码!");return false;
                }        
                if(addr.length==0){
                    alert("请认真填写地址!");return false;
                }                        
        if(email.length==0){
                    alert("请认真填写邮件!");return false;
                }         
        if(!reg.test(email)){
                    alert("电子邮件检测失败");return false;
                }
        var send = {'name':name,'ages':ages,'pass':pass,'addr':addr,'email':email};                 
                $.post('_process.php',send,function(data){
                        if(data.res==-1){
                            $("#result").addClass("error"); 
                        }
                        $("#result").html(data.msg);
                        //$("form")[0].reset();
                },'json');                
        })
    $("#msg").ajaxStart(function(){
               $(this).fadeIn();
           }).ajaxStop(function(){
               $(this).fadeOut();
        })        
</script>
</body>
</html>


2,_process.php接收ajax提交数据 并做相关处理的文件
<?php
header('Content-Type:text/html;charset=utf-8');
sleep(1);
$conn = mysqli_connect("localhost","root","root","register") or die("Unable to connect!".mysqli_connect_error());
mysqli_query($link,"set names utf8");


$name = isset($_POST['name'])?mysqlQuotes(trim($_POST['name'])):'';
$ages = isset($_POST['ages'])?intval(trim($_POST['ages'])):'';
$pass = isset($_POST['pass'])?mysqlQuotes(trim($_POST['pass'])):'';
$addr = isset($_POST['addr'])?mysqlQuotes(trim($_POST['addr'])):'';
$email = isset($_POST['email'])?mysqlQuotes(trim($_POST['email'])):'';
if(empty($name)){
    echo json_encode(array('res'=>-1,'msg'=>'请您认真输入姓名'));exit;
}
//查询username在 tb_register 表中是否存在,不存在则入库,存在则告知已注册
$sql0 = "select count(1) as nums from tb_register where username='{$name}'";
$row0 = select_one($conn,$sql0);
if($row0['nums']>=1){
    echo json_encode(array('res'=>-1,'msg'=>'对不起,该用户名已被注册!'));exit;
}
if(empty($ages)){
     echo json_encode(array('res'=>-1,'msg'=>'请您认真输入年龄'));exit;
}
if(!preg_match("/^\d+$/",$ages)){
     echo json_encode(array('res'=>-1,'msg'=>'请输入合法的数字'));exit;
}
if(empty($pass)){
     echo json_encode(array('res'=>-1,'msg'=>'请您认真输入密码'));exit;
}
if(empty($addr)){
     echo json_encode(array('res'=>-1,'msg'=>'请您认真输入地址'));exit;
}
if(empty($email)){
     echo json_encode(array('res'=>-1,'msg'=>'请您认真输入邮箱'));exit;
}
if(!preg_match("/^[a-zA-Z0-9_]+@[a-zA-Z0-9_]+(\.[a-zA-Z]+)+$/",$email)){
     echo json_encode(array('res'=>-1,'msg'=>'您的邮箱格式不正确'));exit;
}
$add_day = date("YmdHis");


//以下是入库操作
$sql = "insert into tb_register set username='{$name}',ages='{$ages}',password='{$pass}',address='{$addr}',email='{$email}',add_day='{$add_day}'";
mysqli_query($conn,$sql);
echo json_encode(array('res'=>1,'msg'=>'恭喜你,注册成功!'));exit;


//预防mysql注入攻击函数  入库数据
function mysqlQuotes($content){     
    if(!get_magic_quotes_gpc())         //先看看是否开启自动过滤机制  未开启则手动加函数过滤
        {
          $content = addslashes($content);             
        }
        return stripslashes(htmlspecialchars($content));
}


function select_one($conn,$sql){                    
    $res = mysqli_query($conn,$sql) or die("Failed".mysqli_error());
        $result = array();
        if(!empty($res)){
           $result = mysqli_fetch_assoc($res);
        }
        mysqli_free_result($res);        
        return $result;
}


******以上  自定义函数mysqlQuotes中**********
Tips1, (PS:T不错的PHP Q扣峮:276167802,验证:csl)
addslashes 函数的作用是给指定的字符加上反斜杠,主要有以下特殊字符
单引号(')   ,   双引号(")  , 反斜杠(\)  ,  NULL


Tips2,
htmlspecialchars   函数的作用是把一些特殊的字符转换为html实体 ,这些特定的字符有:
& (和号)          ==>       &   
" (双引号)       ==>       "
' (单引号)        ==>       ' 
< (小于号)      ==>       < 
> (大于号)      ==>       > 


Tips3,
stripslashes  函数作用是删除 由addslashes ()函数添加的饭斜杠,恢复原来的摸样
如,$username 用户输入的是 Tom‘siy 
       存进数据库的是加反斜杠的   Tom\‘siy;  

       取出来之则可以用stripslashes() 将其还原输出 Tom‘siy  


以上是本文关于Ajax 提交表单数据到入库的全盘操作流程,希望本文对广大php开发者有所帮助,感谢阅读本文。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 Ajax 提交单数据到数据库需要以下步骤: 1. 在页面中引入 jQuery 库和 weui 库。 2. 编写 HTML 单,并设置单的 id 属性。 3. 编写 JavaScript 代码,在提交时使用 Ajax 技术将数据提交到后台。 以下是示例代码: HTML 代码: ```html <form id="myForm"> <div class="weui-cells__title">个人信息</div> <div class="weui-cells"> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">姓名</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="text" name="name" placeholder="请输入姓名"> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="tel" name="phone" placeholder="请输入手机号码"> </div> </div> </div> <div class="weui-btn-area"> <button type="submit" class="weui-btn weui-btn_primary">提交</button> </div> </form> ``` JavaScript 代码: ```javascript $(function() { $('#myForm').submit(function(e) { e.preventDefault(); // 阻止单默认提交事件 var formData = $(this).serialize(); // 获取单中的数据 $.ajax({ url: 'save.php', // 后台处理文件的 URL type: 'POST', data: formData, // 提交的数据 success: function(res) { if (res.code == 0) { alert('数据保存成功!'); } else { alert('数据保存失败!'); } }, error: function() { alert('网络错误,请稍后再试!'); } }); }); }); ``` 在上面的代码中,我们使用了 jQuery 的 serialize() 方法将单中的数据序列化为字符串,然后使用 $.ajax() 方法将数据提交到后台。在后台处理文件中,我们可以使用 PHP、ASP、JSP 等服务器端语言来处理单数据,并将处理结果返回给前端页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值