发送数据从HTML到PHP页面不离开页面

我已经使用了大量的时间在堆栈溢出和谷歌搜索，但没有为我工作。发送数据从HTML到PHP页面不离开页面

我在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。任何帮助将不胜感激。如果有人需要澄清我在这里。

来源

2014-09-20 Asim K T

我不知道如何，但这对我工作。谢谢你的答案。

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

来源

2014-09-23 04:39:22

虽然您的输入有一个ID，但它们没有名称属性。序列化使用名称为数据创建键值对。

参见：http://api.jquery.com/serialize/

注意：只有 “成功控制” 被序列化到字符串。由于未使用按钮提交表单，所以没有提交按钮值被序列化。对于包含在序列化字符串中的表单元素的值，元素必须具有名称属性。仅当检查复选框和单选按钮（“收音机”或“复选框”类型的输入）时，才会包含这些值。来自文件选择元素的数据不会被序列化。

更改您的输入：

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

来源

2014-09-20 09:43:35 jme11

谢谢，我添加了名称属性，但仍然无法正常工作。 – 2014-09-20 10:00:34

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

它提交整个形式并不会离开当前页面。

来源

2014-09-20 09:51:27 andrex

我想在javascript文件<script src = "js/jquery.js"></script>中可能会出现一些错误。我试过你的代码。当我更改JavaScript文件时它工作。试用
<script src = "http://code.jquery.com/jquery-1.11.0.min.js"></script>
它已经为我工作。

来源

2014-09-20 10:15:42 Salini

你应该把目标属性在您选择的形式，以便它看起来就像是：

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

应该做的作业

来源

2014-09-20 10:20:30 benjah

用这段代码改变脚本部分....你需要拨打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>

来源

2014-09-20 10:32:24

发送数据从HTML到PHP页面不离开页面

回答

相关问题