[英]sending data from html to php page without leaving page
我已经在堆栈溢出和谷歌搜索上花费了大量时间，但是没有一个对我有用。
我有一个html表单，我需要不离开页面就将数据发送到php。我使用了ajax和javascript.I可以通过离开页面来发布数据，但是我不想离开页面。
这是我的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中的“名称”，所以我不在这里发布php。 任何帮助将不胜感激。 如果有人需要澄清，我在这里。
尽管您的输入具有ID，但它们没有name属性。 序列化使用名称来创建数据的键值对。
请参阅： http ： //api.jquery.com/serialize/
注意：只有“成功控件”才被序列化到字符串。 由于没有使用按钮提交表单，因此没有序列化提交按钮的值。 为了使表单元素的值包含在序列化的字符串中， 该元素必须具有name属性 。 仅当选中复选框和单选按钮（“ radio”或“ checkbox”类型的输入）中的值时，才包括这些值。 来自文件选择元素的数据未序列化。
将输入更改为：
<input type="text" class="topcoat-text-input" placeholder="text" value="" id="name" name="name"/>
您应该将target属性放入您的表单中，使其看起来像这样：
<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>
那应该做的工作
用这段代码更改脚本部分。...您需要调用ev.preventDefault(); 在ajax调用之前...
<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>
我不知道如何，但这对我有用。谢谢答案。
当我将它放在index.php所在的同一目录（即localhost：/）时，html表单起作用。 如果在另一个地方，它没有用。我不知道为什么，但是我正在弄清楚。
您需要的是在这里http://malsup.com/jquery/form/
它将提交整个表单，并且不会离开当前页面。
我认为javascript文件<script src = "js/jquery.js"></script>可能存在一些错误。 我已经尝试过您的代码。 当我更改javascript文件时，它可以正常工作。 请尝试
<script src = "http://code.jquery.com/jquery-1.11.0.min.js"></script>
它为我工作。
HTML Form 发送数据到 PHP Form 不离开当前页面
[英]HTML Form sends data to PHP Form without leaving the current page
将数据从HTML页面发送到PHP脚本并在PHP中选择数据
[英]Sending data from a HTML page to a PHP script and picking the data in PHP
在不离开当前页面的情况下从 Javascript 调用 PHP 脚本
[英]Calling PHP scripts from Javascript without leaving current page
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.