0

我已经为此苦苦挣扎了一段时间。我知道有很多关于这个的帖子，但由于我是这个主题的新手，我很难理解。我想将我的复选框表单的值发布到 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);
    }

?>

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

4

3 回答 3

0

在这一行中，您正在选择一个具有类的元素，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;"/>
于 2012-11-23T11:59:59.190 回答
0

您可以使用一个自动为您制作的库，即 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();
  });
});
于 2012-11-25T08:53:48.207 回答
0

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

于 2012-11-23T12:15:42.303 回答