提交表单数据，而不用$ ajax刷新页面

Question

我正在尝试提交表单而不刷新页面。 我的php代码如下所示：

 <form> <label for="roundcheck" style="color: red; font-size: 16pt;font-family: roboto;">Round: </label> <input type="text" name="roundcheck" class="textbox" style="" id="roundcheck" value="<?php $game = fetchinfo("value","info","name","current_game"); echo $game-1; ?>" placeholder="Round number"> <input type="submit" id="checkbtn" class="button2" value="Check"> </form> <div id="checkinfo"> </div> 

我试图从“ checkfair.php”中检索数组，并使用$ ajax在“ checkinfo”中显示它，如下所示：

 $(document).ready(function(){ $('#checkbtn').click(function() { $("#checkinfo").show("fast"); $.ajax({ type: "GET", url: "checkfair.php", }).done(function (msg) { msg = $.trim(msg); if (msg != '[]') { var obj = jQuery.parseJSON(msg); $("#checkinfo").html=('<p>Round <span style="color:red;">#'+obj.round+'</span><br>Value: <span style="color:red;">$'+obj.value+'</span><br>Winner: <span style="color:red;">'+obj.winner+'</span><br>Hash: <span style="color:red;">'+obj.hash+'</span><br>Salt: <span style="color:red;">'+obj.salt+'</span><br>Ticket: <span style="color:red;">'+obj.ticket+'</span></p>'); } }); }); }); 

“ checkfair.php”文件如下所示：

 <?php @include_once ("set.php"); $round = $_GET["roundcheck"]; echo json_encode([ "round" => $round, "value" => round(fetchinfo("cost", "games", "id", $round), 2), "winner" => fetchinfo("winner", "games", "id", $round), "hash" => fetchinfo("hash", "games", "id", $round), "salt" => fetchinfo("salt", "games", "id", $round), "ticket" => round(fetchinfo("winticket", "games", "id", $round) * 100, 7) ]); ?> 

我希望当我按“ checkbtn”而不刷新表单时，所有内容都显示在<div id="checkinfo"> 。

Answer 1

尝试这个

<script>
$(document).ready(function(){
$('#checkbtn').click(function() {
    $("#checkinfo").show("fast");
  $.ajax({
    type: "GET",
    data:"roundcheck="+$("#roundcheck").val(),
    url: "checkfair.php",
}).done(function (msg) {
    msg = $.trim(msg);
    if (msg != '[]') {
        var obj = jQuery.parseJSON(msg);
        $("#checkinfo").html=('<p>Round <span style="color:red;">#'+obj.round+'</span><br>Value: <span style="color:red;">$'+obj.value+'</span><br>Winner: <span style="color:red;">'+obj.winner+'</span><br>Hash: <span style="color:red;">'+obj.hash+'</span><br>Salt: <span style="color:red;">'+obj.salt+'</span><br>Ticket: <span style="color:red;">'+obj.ticket+'</span></p>');
    }
});
});
});
</script>

你忘了发送数据

data:"roundcheck="+$("#roundcheck").val(),

Answer 2

它不起作用，因为您的表单是：a）根本不提交，并且b）不会将任何数据传递给后端。 与其将您的AJAX函数绑定到“提交”按钮的“单击”事件，不如将其绑定到整个表单的“提交”事件。

尝试如下修改AJAX函数：

$(document).ready(function(){
    $('#checkbtn').parents('form').submit(function(e) {
        e.preventDefault();
        $("#checkinfo").show("fast");
        $.ajax({
            type: "GET",
            url: "checkfair.php",
            data: $(this).serialize()
        }).done(function (msg) {
            msg = $.trim(msg);
            if (msg != '[]') {
                var obj = jQuery.parseJSON(msg);
                $("#checkinfo").html=('<p>Round <span style="color:red;">#'+obj.round+'</span><br>Value: <span style="color:red;">$'+obj.value+'</span><br>Winner: <span style="color:red;">'+obj.winner+'</span><br>Hash: <span style="color:red;">'+obj.hash+'</span><br>Salt: <span style="color:red;">'+obj.salt+'</span><br>Ticket: <span style="color:red;">'+obj.ticket+'</span></p>');
            }
        });
    });
});

或者，为了使代码更简洁，请在表单中添加一个特定的选择器，然后将.parents()事件处理程序直接绑定到该表单（而不是使用.parents()方法）：

$('form#some-id').submit(function(e) {

Answer 3

尝试这个;

<form id="myForm">

并添加javascript;

$("#myForm").submit(function(e) {
     e.preventDefault();
});

你准备走了。 希望能有所帮助。

Answer 4

只需将其添加到您的表单中，就会发布广告字段：

示例： http ： //www.codesheet.org/codesheet/VzXPlp3Z

范例2： http ： //www.codesheet.org/codesheet/ycOMf3pi

Ajax： http ： //www.simonerodriguez.com/wp-content/plugins/downloads-manager/upload/ajaxsbmt.js

<form name="MyForm" action="response_normal.php" method="post" onsubmit="xmlhttpPost('response_ajax.php, 'MyForm', 'MyResult', '<img src=\'pleasewait.gif\'>'); return false;">

响应div：

<div id="MyResult"></div>