Question

我已经在堆栈溢出和谷歌搜索中花费了大量时间。但这些都不适用于我。

我在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>

我可以访问＆＃34; name＆＃34;在PHP通过帖子离开页面，所以我不在这里发布PHP。任何帮助将受到高度赞赏。如果有人需要澄清我在这里。

Answer 1

虽然您的输入有ID，但他们没有名称属性。 Serialize使用名称为数据创建键值对。

请参阅：http://api.jquery.com/serialize/

注意：只有＆＃34;成功控制＆＃34;被序列化为字符串。没有提交按钮值被序列化，因为表单未使用按钮提交。要使表单元素的值包含在序列化字符串中，元素必须具有名称属性。复选框和单选按钮（类型为＆＃34;输入＆＃34;或＆＃34;复选框＆＃34;的输入）中的值仅在选中时才包括在内。来自文件选择元素的数据未被序列化。

将您的输入更改为：

<input type="text" class="topcoat-text-input" placeholder="text" value="" id="name" name="name"/>

Answer 2

你应该将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>

应该做的工作

Answer 3

使用这段代码更改脚本部分....您需要在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>

Answer 4

我不知道这对我有用。谢谢你的答案。

当我将它放在index.php所在的同一目录（即在localhost：/）时，html表单有效。如果它在另一个地方它没有工作。我不知道为什么，但我正在搞清楚。

Answer 5

你需要的是在这里 http://malsup.com/jquery/form/

它提交整个表格，不会离开当前页面。

Answer 6

我认为javascript文件<script src = "js/jquery.js"></script>可能存在一些错误。我试过你的代码。当我更改javascript文件时它正在工作。请与<script src = "http://code.jquery.com/jquery-1.11.0.min.js"></script>一起尝试。这对我有用。

将数据从html发送到php页面而不离开页面

6 个答案: