Php 在同一网页上显示结果_Php_Jquery_Html

Php 在同一网页上显示结果

php jquery html

Php 在同一网页上显示结果,php,jquery,html,Php,Jquery,Html,我使用php、mysql和ajax来显示联系人表单，但问题是输出“插入1条记录”会显示在下一页上。我想在提交时显示在同一页上下面是代码 validation.html <html> <head> <title>Contact Form</title> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <scri

我使用php、mysql和ajax来显示联系人表单，但问题是输出“插入1条记录”会显示在下一页上。我想在提交时显示在同一页上

下面是代码

validation.html

<html>
<head>
    <title>Contact Form</title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
   <script type="text/javascript" language="javascript">

 //  <script type="text/javascript">

$(document).ready(function(){ 
    $("#myButton").click(function() { 
    alert("Hii");
        $.ajax({
        cache: false,
        type: 'POST',
        url: 'validation.php',
        data: $("#contact").serialize(),
        success: function(d) {
            $("#record").html(d);
        }
        });
    }); 
});

</script>
    </head>
    <body>
    <form method="post" id="contact" action="validation.php">
    Name: <input type="text" name="name"> <br>
    E-mail: <input type="text" name="email"> <br>
    Password: <input type="text" name="pass"> <br>
    Mobile: <input type="number" name="mobile"> <br>
    <br>
    <input type="submit" value="SUBMIT" id="mybutton"/>
    </form>
    <div id="record">Record has been inserted</div>
    </body>
</html>


联系方式
//  
$（文档）.ready（函数（）{
$（“#myButton”）。单击（函数（）{
警报（“Hii”）；
$.ajax({
cache:false，
键入：“POST”，
url:'validation.php'，
数据：$（“#联系人”）.serialize（），
成功：功能（d）{
$（“#记录”）.html（d）；
}
});
}); 
});
名称：

电子邮件：

密码：

手机：



记录已插入

有人能指出我如何继续这样做，或者需要做哪些更改吗？

这是因为当您单击

#myButton

时，您正在提交表单，它会重定向您

只需防止默认操作

$("#myButton").click(function(event) { 
event.preventDefault();
alert("Hii"); //what is this for???
    $.ajax({
    cache: false,
    type: 'POST',
    url: 'validation.php',
    data: $("#contact").serialize(),
    success: function(d) {
        $("#record").html(d);
    }
    });
});

这是因为当你点击

#myButton

时，你正在提交表单，它会重定向你

只需防止默认操作

$("#myButton").click(function(event) { 
event.preventDefault();
alert("Hii"); //what is this for???
    $.ajax({
    cache: false,
    type: 'POST',
    url: 'validation.php',
    data: $("#contact").serialize(),
    success: function(d) {
        $("#record").html(d);
    }
    });
});

当前表单由您的按钮提交，因为它是一个

提交按钮

。如果您不想提交表单，有几种方法，但这两种是最好的：

// Use prevent default
$("#myButton").click(function(e) { // This 'e' is important
  e.preventDefault()
  # rest of the function here
});

或者，您可以用链接标签（仅带有占位符href）替换提交按钮，如下所示：

<html>
  <head>
    <title>Contact Form</title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" language="javascript">

    <script type="text/javascript">
      // Actual Javascript code here
    </script>
  </head>
  <body>
    <form method="post" id="contact" action="validation.php">
    Name: <input type="text" name="name"> <br>
    E-mail: <input type="text" name="email"> <br>
    Password: <input type="text" name="pass"> <br>
    Mobile: <input type="number" name="mobile"> <br>
    <br>
    <a href="#" id="mybutton">SUBMIT</a>
    </form>
    <div id="record">Record has been inserted</div>
  </body>
</html>


联系方式
//这里是实际的Javascript代码
名称：

电子邮件：

密码：

手机：



记录已插入

最好将两者结合起来。

目前表单由您的按钮提交，因为它是一个

提交按钮。如果您不想提交表单，有几种方法，但这两种是最好的：
// Use prevent default
$("#myButton").click(function(e) { // This 'e' is important
  e.preventDefault()
  # rest of the function here
}); 

或者，您可以用链接标签（仅带有占位符href）替换提交按钮，如下所示：
<html>
  <head>
    <title>Contact Form</title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" language="javascript">

    <script type="text/javascript">
      // Actual Javascript code here
    </script>
  </head>
  <body>
    <form method="post" id="contact" action="validation.php">
    Name: <input type="text" name="name"> <br>
    E-mail: <input type="text" name="email"> <br>
    Password: <input type="text" name="pass"> <br>
    Mobile: <input type="number" name="mobile"> <br>
    <br>
    <a href="#" id="mybutton">SUBMIT</a>
    </form>
    <div id="record">Record has been inserted</div>
  </body>
</html>


联系方式
//这里是实际的Javascript代码
名称：

电子邮件：

密码：

手机：



记录已插入

最好将两者结合起来。
它会打开另一个页面，因为当您单击#myButton

时，表单将执行提交过程
有一些方法可以解决这个问题。


1.将属性添加到表单标记中：

<form method="post" id="contact" action="validation.php" onsubmit="return false;">

它会打开另一个页面，因为当您单击#myButton
时，表单将执行提交过程

有一些方法可以解决这个问题。


1.将属性添加到表单标记中：

<form method="post" id="contact" action="validation.php" onsubmit="return false;">

你正在提交按钮，只需更改
<input type="button" id="myButton">Submit</input>
OR
<button id="myButton">Submit</button>

提交
或
提交

它将调用您的ajax请求。
您正在提交按钮，只需更改即可
<input type="button" id="myButton">Submit</input>
OR
<button id="myButton">Submit</button>

提交
或
提交

它将调用您的ajax请求。
尝试调用函数onclick
输入元素的事件
<input type="submit" value="SUBMIT" id="mybutton" onclick="return myFunction()"/>

也要更换这个
<form method="post" id="contact" action="validation.php">



与


它应该对你有帮助！
谢谢。
尝试调用函数onclick
输入元素的事件
<input type="submit" value="SUBMIT" id="mybutton" onclick="return myFunction()"/>

也要更换这个
<form method="post" id="contact" action="validation.php">



与


它应该对你有帮助！
谢谢。
试试这个
 <input type="button" id="myButton">Submit</input>

提交

或
提交
试试这个
 <input type="button" id="myButton">Submit</input>

提交

或
提交
再次使用ajax post，而不是Submit。我必须查看它，初始搜索对您的答案有意义。你能更具描述性地把它作为一个答案发布吗？你为什么不做呢？你是否更改了$（“#我的按钮”）。点击到$（“#我的按钮”）。点击？它区分大小写。让我们再次使用ajax post，而不是我必须研究它，初始搜索对您的答案有意义。你能更具描述性地把它作为一个答案发布吗？你为什么不做呢？你是否更改了$（“#我的按钮”）。点击到$（“#我的按钮”）。点击？这是区分大小写的。让我们看看你花了8分钟才发布了我发布的答案？仔细阅读，我建议了不同的帮助！你花了8分钟发布了我发布的答案？仔细阅读，我建议了不同的帮助！我也这么做了，但它仍被重定向到下一页：（听起来像是发生了其他事情，如果你阻止默认设置，那么表单就不应该在allI提交。我已经在if-else循环中插入了一个echo，表明数据已经插入validation.php，没有什么了。我犯了一个愚蠢的错误，打开了两个脚本标记，删除它后工作正常。是的，dat警报（“Hii”）用于检查脚本是否正在实际运行：）我做了相同的操作，但它仍被重定向到下一页：（听起来像是发生了其他事情，如果你阻止默认设置，那么表单就不应该在allI提交。我已经在if-else循环中插入了一个echo，表明数据已经插入validation.php，没有什么了。我犯了一个愚蠢的错误，打开了两个脚本标记，删除它后工作正常。是的，dat警报（“Hii”）用于检查脚本是否正在实际运行：）尝试此操作，但数据未插入数据库您的return false
不在click
的回调函数范围内对不起，我的错误，return应该在click函数中更改了，但它仍然没有插入数据库。您是否更正了按钮id？请确保您已将其更改为相同的id（脚本和html中的按钮id）尝试此操作，但数据未插入数据库您的return false
不在click
的回调函数范围内对不起，我的错误，return应该在click函数中更改了，但它仍然没有插入数据库。您是否更正了按钮id？请确保您已将其更改为相同的id（脚本和html中的按钮id）这是怎么回事