ajax无刷新表单提交
程序员文章站
2024-03-01 08:48:22
...
ajax无刷新提交笔记
数据库自己模拟建一个 执行一下添加功能
php部分采用pdo方法：
<?php
$db ='mysql';
$host ='localhost';
$port ='3306';
$dbname = 'ajax';
$user = 'root';
$pwd = '';
$dsn = "$db:host=$host;port=$port;dbname=$dbname";
//设定字符集
$options = array(PDO::MYSQL_ATTR_INIT_COMMAND=>'SET NAMES \'UTF8\'');
$pdo = new PDO($dsn,$user,$pwd,$options);
$name = $_POST['name'];
//print_r ($name);exit;
$pwd = $_POST['pwd'];
$code = $_POST['code'];
$sql = "insert into user (name,pwd,code) values ('".$name."','".$pwd."','".$code."')";
$res=$pdo->exec($sql);
if ($res){
echo 1;
exit;
}else{
echo 2;
exit;
}ajax前端部分
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".user_main_r button").click(function(){
$.post('./login.php', $('form').serialize(), function(data) {
if(data == 1){
alert ('添加成功');
$("#admin_user").val('');
$("#admin_psd").val('');
$("#captcha").val('');
}else{
alert ('添加失败');
}
});
});
});
</script>
<title>无刷新用户登录</title>
</head>
<body id="userlogin_body">
<form id="form" method="post" >
<ul>
<div class="user_main_box">
<ul>
<li class="user_main_text">用户名： </li>
<li class="user_main_input">
<input id="admin_user" name="name" maxlength="20" />
</li>
</ul>
<ul>
<li class="user_main_text">密 码： </li>
<li class="user_main_input">
<input class="TxtPasswordCssClass" id="admin_psd" name="pwd" type="password">
</li>
</ul>
<ul>
<li class="user_main_text">×××： </li>
<li class="user_main_input">
<input class="TxtValidateCodeCssClass" id="captcha" name="code" type="text">
</li>
</ul>
</div>
</li>
<li class="user_main_r">
<button type="button" >提交</button>
</li>
</ul>
</form>
</body>
转载于:https://blog.51cto.com/kangjunfei/1952352