Question

我一直在努力解决这个问题。我知道有很多关于此的帖子，但由于我是这个主题的新手，我很难理解。我想将我的复选框表单的值发布到php脚本，并将值的值返回到我页面上的div。这是代码：

使用ajax调用

onclick函数：

    <script>
    function submit_form(){
    var data = { 'saqalinproxy[]' : []};
    $("input:checked").each(function() {
    var chck1 = $(this).val();
    alert(chck1);
    data['saqalinproxy[]'].push($(this).val());
    });
    $.ajax({
    type : 'POST',
    url : 'testdeploy.php',
    data : data,
    dataType: "html",
    success : function(data){
          $('#progress_status').hide();
          $('.return').html(data); // replace the contents coming from php file
            }
        });
          $('#progress_status').show();
   }
   </script>

HTML表单：

<div style="width: 700px; height: 150px; padding: 10px">
<form id="caForm" class="caForm" method="post" name="caForm">
<fieldset id="fs-0">
<legend>QA Proxy Servers</legend>
<input type="checkbox" id="saqalin-proxy01" name="saqalinproxy[]" value="41.191.126.246">saqalin-proxy01<br>
<input type="checkbox" id="saqalin-proxy02" name="saqalinproxy[]" value="41.191.126.247">saqalin-proxy02<br><br>
<!--<input type="checkbox" id="ca-0"> Check/Uncheck All -->
<br>
<input type="submit" value="Deploy" onclick="submit_form();"/>

</fieldset>
</form>

</div>

<div id="status">
<p style="display:none;" id="progress_status"><img id="progress_image_status" style="padding-left:5px;padding-top:5px;" src="images/ajax-loader.gif" alt=""> Checking if this kak works!</p>
</div>

<div id="return"></div>

PHP帖子页面：

<?

    if(isset($_POST['saqalinproxy[]'])){
        $invite = $_POST['saqalinproxy[]'];
        print_r($invite);
    }

?>

我正在努力获取我页面上返回的值。任何帮助表示赞赏。

Answer 1

在这一行上，您选择的是一个类return的元素，因为.表示一个类名：

$('.return').html(data);

在您的HTML中，您的div id return不是一个类（请注意#）。所以改成它：

$('#return').html(data);

您的第二个问题是在PHP代码中，您尝试使用$_POST['saqalinproxy[]']定位已发布的数组。 PHP将其直接解析为PHP数组，因此$_POST['saqalinproxy']实际上就是数组。

 if(isset($_POST['saqalinproxy'])){
    $invite = $_POST['saqalinproxy'];

例如，如果同时检查了两个项目：

echo $_POST['saqalinproxy'][0]; // outputs 41.191.126.246
echo $_POST['saqalinproxy'][1]; // outputs 41.191.126.247

此外，您可以简单地序列化表单，而不是尝试像您一样构建帖子数据：

$.ajax({
    type : 'POST',
    url : 'testdeploy.php',
    data : $('#caForm').serialize(),

当您修复这些问题后，您会看到表单提交两次。第一次作为ajax，然后第二次作为传统请求。要解决此问题，您需要在onclick中返回false或从函数返回false ..

<input type="submit" value="Deploy" onclick="submit_form(); return false;"/>

Answer 2

html js和php都没有什么变化。在html中

<input type="submit" value="Deploy" onclick="return submit_form();"/>

在js中，在submit_form函数中返回false。并在PHP

if(isset($_POST['saqalinproxy'])){
    $invite = $_POST['saqalinproxy'];
    print_r($invite);
}

也会更改$('.return').html(data); to $('#return').html(data);

Answer 3

您可以使用自动为您制作的库，即phery http://phery-php-ajax.net，在您的情况下，就像这样（注意表单上的data-remote="deploy"）

<div style="width: 700px; height: 150px; padding: 10px">
    <form id="caForm" class="caForm" data-remote="deploy" action="testdeploy.php" name="caForm">
        <fieldset id="fs-0">
            <legend>QA Proxy Servers</legend>
            <input type="checkbox" id="saqalin-proxy01" name="saqalinproxy[]" value="41.191.126.246">saqalin-proxy01<br>
            <input type="checkbox" id="saqalin-proxy02" name="saqalinproxy[]" value="41.191.126.247">saqalin-proxy02<br><br>
            <!--<input type="checkbox" id="ca-0"> Check/Uncheck All -->
            <br>
            <input type="submit" value="Deploy" />
        </fieldset>
    </form>
</div>

<div id="status">
    <p style="display:none;" id="progress_status"><img id="progress_image_status" style="padding-left:5px;padding-top:5px;" src="images/ajax-loader.gif" alt=""> Checking if this kak works!</p>
</div>

<div id="return"></div>

然后在你的testdeploy.php中，你会将其更改为：

function deploy($data){
  $r = new PheryResponse;
  foreach ($data['saqalinproxy'] as $proxy){
    // do whatever you need to do with $proxy here
  }
  $r->jquery('#return')->html('set the HTML of your return');
  $r->jquery('#progress_status')->hide();
  return $r;
}

Phery::instance()->set(array(
  'deploy' => 'deploy'
))->process();

这就是它，不需要额外的Javascript代码，它全部是自动的。但为了显示进展，你要做：

$(function(){
  // phery:before fires before sending the AJAX
  $('#caForm').bind('phery:before', function(){
    $('#progress_status').show();
  });
});

Checkbox Ajax返回帖子

3 个答案: