logo标签列表

提交表单无需重新加载页面且不显示“OK”信息

phpajaxformsreload
3
我希望你能协助解决以下问题：
我尝试在不重新加载页面的情况下提交表单，但没有成功。我已经阅读了其他相关问题，但是还是无法实现。
我想要如下功能： 当用户点击按钮时，数据应发送到服务器，而无需显示OK消息。 你能帮我吗？ 这里是我的代码：

index.html

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
    <p align="center">Example</p>
    <table align="center" width="730" border="0">
    <tr>
    <td align="center">
    <div>
      <table class="blueTable" style="float: left">
        <thead>
    <tr>
     <th colspan="1"><u>Menu</u></th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><input type="button" value="New" id="new" onclick="new1();" class="button12"/></td></tr>
    <tr>
    <td><input type="button" value="Load" id="load" onclick="load2()" class="button"/></td></tr>
    <tr>
    <td><form name="SaveGame" id="SaveGame" method="post" action="http://127.0.0.1/PHP/mine2.php" enctype="multipart/form-data">
    <input type="submit" value="Save" id="save" onclick="save3()" class="button"/>
    </form>
    </body>
    </html>

mine2.php

<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$link = mysqli_connect("127.0.0.1", "root", "", "mysql3");
// Check connection
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}

// Attempt insert query execution
$sql = "INSERT INTO components (user_id, book_id, game_id, site_id) VALUES ('6', '6', '6', '6')";
if(mysqli_query($link, $sql)){
    } else{
    }

// Close connection
mysqli_close($link);
?>
你需要 JavaScript。你的表单似乎已经在使用 JavaScript 了，因为你有一些 onclick() 函数。你也应该在这里展示相关的 JavaScript 代码。 - jeroen
你好，你使用了JS函数save3()，能否提供一下这段代码？ - Sfili_81
1
使用ajax提交表单。 - Karlo Kokkak
@jeroen 我还没有在onclick()函数中编写代码。 - Stelios
1
可能是无需页面重新加载即可提交表单的重复问题。 - Ahmed Sunny
2个回答
2

更改你的html文件，像这样：

<html>
    <head>
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
    <p align="center">Example</p>
    <table align="center" width="730" border="0">
    <tr>
    <td align="center">
    <div>
      <table class="blueTable" style="float: left">
        <thead>
    <tr>
     <th colspan="1"><u>Menu</u></th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><input type="button" value="New" id="new" onclick="new1();" class="button12"/></td></tr>
    <tr>
    <td><input type="button" value="Load" id="load" onclick="load2()" class="button"/></td></tr>

    <button  id="save" onclick="save3()" class="button">Save</button><!--This button will perform action-->


    <script>



       function save3(){
        var value = 123;//dummy variable to show you its functionality
        $.ajax({
               type: "POST",
               url: "http://127.0.0.1/PHP/mine2.php",
               data: {value: value}, //that value comes from above which I have initialized
               success: function(data)
               {
                   console.log(data); //it will show response from php file in your console
               }



        });
     }
    </script>

    </body>
    </html>

在 php 文件 mine2.php 中，您可以通过以下方式访问来自 ajax 请求的 value 值：

<?php
 if(isset($_POST['value']))
  {
    $value = $_POST['value'];
  }
 ?>
非常感谢你。你真的帮了我！ - Stelios
1
我很高兴能够帮助你。干杯!!! - Zain Farooq
1
将您的HTML文件更改为以下内容：
<html>
    <head>
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
    <p align="center">Example</p>
    <table align="center" width="730" border="0">
    <tr>
    <td align="center">
    <div>
      <table class="blueTable" style="float: left">
        <thead>
    <tr>
     <th colspan="1"><u>Menu</u></th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><input type="button" value="New" id="new" onclick="new1();" class="button12"/></td></tr>
    <tr>
    <td><input type="button" value="Load" id="load" onclick="load2()" class="button"/></td></tr>
    <tr>
    <td><form name="SaveGame" id="SaveGame" method="post" action="http://127.0.0.1/PHP/mine2.php" enctype="multipart/form-data">
    <input type="submit" value="Save" id="save" onclick="save3()" class="button"/>
    </form>

    <script>
        $("#SaveGame").submit(function(e) {


    var form = $(this);
    var url = form.attr('action');

        $.ajax({
               type: "POST",
               url: url,
               data: form.serialize(), // serializes the form's elements.
               success: function(data)
               {
                   alert(data); // show response from the php script.
               }
             });

        e.preventDefault(); // avoid to execute the actual submit of the form.
    });
    </script>

    </body>
    </html>

如果您添加了一些输入，您可以在您的PHP脚本中使用$_POST获取它们的值。
我简直不敢相信！非常感谢你！它起作用了。 - Stelios
1
只需查看有关 AJAX 的更多信息，它非常简单 :) - MorganFreeFarm
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接