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

2番目の問題は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(),

これらの問題を修正すると、フォームが2回送信されていることがわかります。最初はajaxとして、次に従来のリクエストとして。これを解決するには、onclickでfalseを返すか、関数からfalseを返す必要があります。

<input type="submit" value="Deploy" onclick="submit_form(); return false;"/>
于 2012-11-23T11:59:59.190 に答える
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 に答える
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 に答える