Javascript jqueryajax表单提交与twitter引导模式
我正在开发一个聊天室，我希望客户点击按钮“单击此处并开始聊天”，打开表单，然后提交表单“开始聊天” 但是我不能使用ajax提交，我检查了控制台日志，没有什么奇怪的Javascript jqueryajax表单提交与twitter引导模式,javascript,php,jquery,ajax,twitter-bootstrap,Javascript,Php,Jquery,Ajax,Twitter Bootstrap,我正在开发一个聊天室，我希望客户点击按钮“单击此处并开始聊天”，打开表单，然后提交表单“开始聊天” 但是我不能使用ajax提交，我检查了控制台日志，没有什么奇怪的 <!DOCTYPE html> <html> <head> <title>Start Chat</title> <meta charset="utf-8"> <link type="text/css" rel="stylesheet"
<!DOCTYPE html>
<html>
<head>
<title>Start Chat</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" media="all" href="css/chat.css" />
<link type="text/css" rel="stylesheet" media="all" href="css/bootstrap.css" />
</head>
<body>
<center>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Click here and start ur chat
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Write ur info below</h4>
</div>
<div class="modal-body">
<form action="" method="POST" id="form">
<table width="100%">
<tr>
<td>Name: </td> <td><input type="text" name="name" placeholder="Name"></td>
</tr>
<th> </th>
<tr>
<td>Mail: </td> <td><input type="text" name="mail" placeholder="Mail"></td>
</tr>
</table>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="start">Start Chat</button>
</div>
</div>
</div>
</div>
<!-- javascript:chatWith('3','Ronaldo') -->
</center>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#form").submit(function(e){
$.ajax({
url: "dateRecd.php",
type: "POST",
data: $(this).serialize(),
success: function(data){
alert(data);
// chatWith('9','name');
}
});
});
});
});
</script>
</body>
</html>
开始聊天
点击这里开始聊天
&时代；
把你的信息写在下面
姓名：
邮寄：
关
开始聊天
$（文档）.ready（函数（）{
$（“#开始”）。单击（函数（）{
$（“#表格”）。提交（功能（e）{
$.ajax({
url:“dateRecd.php”，
类型：“POST”，
数据：$（this）.serialize（），
成功：功能（数据）{
警报（数据）；
//聊天室（'9'，'name'）；
}
});
});
});
});
$（文档）.ready（函数（）{
//$（“#开始”）。单击（函数（）{//将完成双重验证
$（“#表格”）。提交（功能（e）{
$.ajax({
url:“dateRecd.php”，
类型：“POST”，
数据：$（this）.serialize（），
成功：功能（数据）{
警报（数据）；
//聊天室（'9'，'name'）；
}
});
});
//});
});
$（文档）.ready（函数（）{
//$（“#开始”）。单击（函数（）{//将完成双重验证
$（“#表格”）。提交（功能（e）{
$.ajax({
url:“dateRecd.php”，
类型：“POST”，
数据：$（this）.serialize（），
成功：功能（数据）{
警报（数据）；
//聊天室（'9'，'name'）；
}
});
});
//});
});
请尝试“单击”操作，而不是在表单中提交
事实上，当您单击“开始”按钮时会发生什么？将单击处理程序添加到“开始”按钮时，如下所示：
$("#form").submit(function(e){
//...
}
type=“submit”其次，当您启动表单的提交操作时，它是通过HTML提交的，而不是ajax。您应该添加行
e.preventDefaulte.preventDefault$("#form").submit(function(e){
//...
}
type=“submit”其次，当您启动表单的提交操作时，它是通过HTML提交的，而不是ajax。您应该添加行
e.preventDefaulte.preventDefault$("#form").submit(function(e){
//...
}