Heim > Web-Frontend > js-Tutorial > jquery 一个完整的无刷新ajax提交表单实例

jquery 一个完整的无刷新ajax提交表单实例

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2016-06-01 09:54:55
Original
1362 Leute haben es durchsucht

js文件代码:

<code class="language-javascript"><script type="text/javascript" src="/Public/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
var username = $("#username").val();
var password = $("#password").val();
var gender = $("#gender").val();
var dataString = 'name='+ name + '&username=' + username + '&password=' + password + '&gender=' + gender;

if(name=='' || username=='' || password=='' || gender=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script></code>
Nach dem Login kopieren

 

html代码:

<code class="language-html"><form method="post" name="form">
<ul>
<li>
<input id="name" name="name" type="text">
</li>
<li>
<input id="username" name="username" type="text">
</li>
<li>
<input id="password" name="password" type="password">
</li>
<li>
<select id="gender" name="gender"> 
<option value="">Gender</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</li>
</ul>
<div>
<input type="submit" value="Submit" class="submit">
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>
</div>
</form></code>
Nach dem Login kopieren

 

php代码:

<code class="language-php"><?php if($_POST)
{
$name=$_POST['name'];
$username=$_POST['username'];
$password=$_POST['password'];
$gender=$_POST['gender'];
mysql_query("SQL insert statement.......");
}else { }

?></code>
Nach dem Login kopieren

 

Verwandte Etiketten:
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage