我已经在堆栈溢出和谷歌搜索中花费了大量时间。但这些对我都不起作用。
我有一个html格式的表单，我需要在不离开页面的情况下将数据发送到php。我使用了ajax和javascript。我可以通过离开页面来POST数据，但我不想离开页面。
这是我的html：
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/topcoat-mobile-light.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script src = "js/jquery.js"></script>
<script type="text/javascript" src = "js/index.js"></script>
<meta name="msapplication-tap-highlight" content="no" />
<title>Title</title>
</head>
<body>
<div class="topcoat-navigation-bar">
<div class="topcoat-navigation-bar__item center full">
<h1 class="topcoat-navigation-bar__title">Header</h1>
</div>
</div>
<div class = "content text-input">
<form id = "form" name = "form" action="http://localhost/index.php" method = "post">
<p>Please fill the details.
<p> Name</p>
<input type="text" class="topcoat-text-input" placeholder="text" value="" id = "name" name = "name">
<input id = "submit" type="submit" class="topcoat-button" value = "Submit">
</form>
<script type="text/javascript">
var frm = $('#form');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
});
ev.preventDefault();
});
</script>
</div>
</body>
</html>
我可以通过离开页面来访问php中的"name"，所以我不会在这里发布php。如有任何帮助，我们将不胜感激。如果有人需要澄清，我在这里。
虽然您的输入有id，但它们没有name属性。Serialize使用名称为数据创建键值对。
请参阅：http://api.jquery.com/serialize/
注意：只有"成功的控件"被序列化到字符串中。没有序列化提交按钮值，因为表单不是使用按钮提交的。要使表单元素的值包含在序列化字符串中，该元素必须具有name属性。复选框和单选按钮（"单选"或"复选框"类型的输入）中的值只有在选中时才会包含在内。文件选择元素中的数据未序列化。
将您的输入更改为：
<input type="text" class="topcoat-text-input" placeholder="text" value="" id="name" name="name"/>
您应该将目标属性放在表单中，这样它就会看起来像：
<form id = "form" name = "form" action="http://localhost/index.php" method = "post" target="some_name">
并将"some_name"作为iframe
<iframe id="some_name" name="some_name" style="display:none position:absulote; z-index:-100"></iframe>
应该完成的工作
用这段代码更改脚本部分。。。。您需要在ajax调用之前调用ev.preventDefault();。。。。
<script type="text/javascript">
var frm = $('#form');
frm.submit(function (ev) {
ev.preventDefault();
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
});
});
</script>
我认为javascript文件<script src = "js/jquery.js"></script>中可能存在一些错误。我试过你的密码了。当我更改javascript文件时，它就工作了。plz尝试使用<script src = "http://code.jquery.com/jquery-1.11.0.min.js"></script>
它对我有效。
我不知道是怎么做到的，但这对我来说很有效。谢谢你的回答。
当我把html表单放在index.php所在的同一目录（即localhost://）时，它就工作了。如果它在另一个地方，它不起作用。我不知道为什么，但我正在想办法。
您需要的东西在这里http://malsup.com/jquery/form/
它提交整个表单，不会离开当前页面。