Отправить данные формы без обновления страницы с помощью $ 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" и отобразить его в "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) 
 
]); 
 
?>

Я хочу, чтобы все отображалось в <div id="checkinfo">, когда я нажимаю «checkbtn», не обновляя форму.

Answer 1

Это не работает, потому что ваша форма a) не представляется вообще, и b) не передает никаких данных на сервер. Вместо привязки функции AJAX к событию «click» кнопки «Отправить» вы должны привязать ее к событию «отправить» всей формы.

Попробуйте изменить вашу функцию 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() метод):

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

Answer 2

Попробуйте

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

попробовать это;

<form id="myForm"> 

и добавить javascript;

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

и вы готовы к работе. Надеюсь, эта помощь.

Answer 4

Просто добавьте это в форму и поля объявлений будут размещены:

Пример: http://www.codesheet.org/codesheet/VzXPlp3Z

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