Question

我有一系列输入字段，我希望他们将他们的值发布到php页面进行处理然后返回一些数据而不重新加载页面。这是我到目前为止所拥有的，但似乎没有数据通过。

HTML：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("form").submit(function(form) {
    $.ajax({
      type:"POST",
      url:"catch.php",
      data: $(this).serialize(),
      success: function(data) {
        $('#result').html(data);
        console.log(data);
      }
    });

    form.preventDefault();
  });
});
</script>
</head>
<body>
<form method="post" name="form">
<input type="submit" name="event" value="1" />
<input type="submit" name="event" value="2" />
<input type="submit" name="event" value="3" />
<input type="submit" name="event" value="4" />
</form>
<div id="result"></div>
</body>
</html>

PHP：

<?php

if(isset($_POST["event"]))
{
  echo $_POST["event"];
}

?>

Answer 1

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>


  $(document).ready(function() {

  $('.event').on('click', function(){
    $('#event').val($(this).val());
    $('#event_form').submit();
  });
  $("form").submit(function(form) {
    $.ajax({
      type:"POST",
      url:"catch.php",
      data: $(this).serialize(),
      success: function(data) {
        $('#result').html(data);
        console.log(data);
      }
    });

    form.preventDefault();
  });
});
</script>
</head>
<body>
    <form method="post" name="form" id="event_form">
<input name="event" id="event" value="" type="hidden">
    <input type="button" class="event" value="1" />
    <input type="button" class="event" value="2" />
    <input type="button" class="event" value="3" />
    <input type="button" class="event" value="4" />
    </form>
 <div id="result"></div>
</body>
</html>

使用Ajax

1 个答案: