复选框 Ajax 返回帖子

我已经为此苦苦挣扎了一段时间。我知道有多个关于这个的帖子，但由于我是这个主题的新手，所以我很难理解。我想将我的复选框表单的值发布到 php 脚本，并将值的值返回给我页面上的div。这是代码：

带有 ajax 调用的点击函数：

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

网页形式：

<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);
    }
?>

我正在努力在我的页面上返回值。任何帮助，不胜感激。

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);

在此行中，您正在选择具有类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，第二次作为传统请求。要解决此问题，您需要在单击中返回 false 或从函数中返回 false。

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

您可以使用一个自动为您制作的库，即 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();
  });
});

相关内容

最新更新

热门标签：