0

わかりました、これでほとんどの作業は完了しました。これからが、私にとって難しい部分です。これは私にとって未知の領域です。

ページを更新せずに、フォーム データを使用して mysql データベースを更新するにはどうすればよいですか? これを行うために AJAX や Jquery を使用していると思いますが、与えられた例をよく理解していません。

このコンテキスト内でこのタスクを実行する方法を教えてください。

だから、これは私のフォームです：

 <form name="checklist" id="checklist" class="checklist">
        <?php // Loop through query results   
              while($row = mysql_fetch_array($result))
                  {
                  $entry = $row['Entry'];
                  $CID = $row['CID'];
                  $checked =$row['Checked'];
                 // echo $CID;
                  echo "<input type=\"text\" value=\"$entry\" name=\"textfield$CID;\" id=\"textfield$CID;\" onchange=\"showUser(this.value)\" />";
                  echo "<input type=\"checkbox\" value=\"\" name=\"checkbox$CID;\" id=\"checkbox$CID;\"  value=\"$checked\"".(($checked == '1')? ' checked="checked"' : '')."  />";
                  echo "<br>";
                  }
        ?> 
        <div id="dynamicInput"></div>
        <input type="submit" id="checklistSubmit" name="checklistSubmit" class="checklist-submit"> <input type="button" id="CompleteAll" name="CompleteAll" value="Check All" onclick="javascript:checkAll('checklist', true);"><input type="button" id="UncheckAll" name="UncheckAll" value="Uncheck All" onclick="javascript:checkAll('checklist', false);">                  
     <input type="button" value="Add another text input" onClick="addInput('dynamicInput');"></form>

これは、ユーザーの session_id に基づいてデータベースから取り込まれますが、ユーザーが新しいリスト アイテムを作成したい (または新しい訪問者期間である) 場合は、[別のテキスト入力を追加] ボタンをクリックすると、新しいフォーム要素が生成されます。

データベースへのすべての更新は、ページを更新する投稿ではなく、AJAX\JQUERY を介して行う必要があります。

私は本当にこれについて助けが必要です。この種のことについて頭を悩ませています...メソッドの更新はちょっと痛いです！

ありがとう。

4

3 に答える 3

2

ボタンのクリックをキャッチする必要があります。そして、伝播を確実に停止してください。

$('checklistSubmit').click(function(e) {
    $(e).stopPropagation();

    $.post({
        url: 'checklist.php'
        data: $('#checklist').serialize(),
        dataType: 'html'
        success: function(data, status, jqXHR) {
           $('div.successmessage').html(data);
           //your success callback function
        } 
        error: function() {
           //your error callback function
        } 
    });
});

それは私が頭の上から作り上げたものです。基本的な考え方を教えてください。必要に応じて、さらに詳しく説明していただければ幸いです。

詳細については、jQuery の $.post のドキュメントを参照してください。

http://api.jquery.com/jQuery.post/

編集：

jquery の serialize メソッドを使用するように変更しました。もともと忘れてました。

詳細:

基本的に、送信ボタンがクリックされると、指定された関数が呼び出されます。DOM をバブリングして通常の送信を行うことでフォームが送信されないように、伝播を停止したいと考えています。

$.post は、 $.ajax({ type: 'post'}); の簡略版です。

したがって、投稿先の URL を指定し、フォーム データを渡すだけで、他のリクエストと同じように php で送信されます。次に、POST データを処理し、変更をデータベースなどに保存して、指定したとおりに JSON データを送り返します。HTML または XML を送り返すこともできます。jQuery のドキュメントには、可能なデータ型が示されています。

成功した関数では、最初のパラメーターとしてデータが返されます。したがって、返されるデータ型として指定したものは何でも、必要な方法で使用するだけです。では、成功メッセージとして html を返したいとしましょう。あなたがする必要があるのは、成功関数でデータを取得し、.append() などを使用して DOM の必要な場所に配置することだけです。

泥のように透明？

于 2013-06-01T03:46:48.793 に答える
1

ここでは 2 つのスクリプトが必要です。1 つは AJAX を実行するスクリプト (フレームワークを使用した方がよい。jQuery は私にとって最も簡単なスクリプトの 1 つです) と、Post データを取得してデータベースを更新する PHP スクリプトです。

完全なソースを提供するつもりはありません (これはそのための場所ではないため) が、ガイドです。jQuery では、次のようなことができます。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { // DOM is ready
    $("form#checklist").submit(function(evt) {
        evt.preventDefault(); // Avoid the "submit" to work, we'll do this manually
        var data = new Array();
        var dynamicInputs = $("input,select", $(this)); // All inputs and selects in the scope of "$(this)" (the form)

        dynamicInputs.each(function() {
            // Here "$(this)" is every input and select
            var object_name = $(this).attr('name');
            var object_value = $(this).attr('value');
            data[object_name] = object_value; // Add to an associative array
        });

        // Now data is fully populated, now we can send it to the PHP
        // Documentation: http://api.jquery.com/jQuery.post/
        $.post("http://localhost/script.php", data, function(response) {
            alert('The PHP returned: ' + response);
        });
    });
});
</script>

次に、PHP (またはその他の Web サーバー スクリプト エンジン) の $_POST から値を取得し、DB を更新します。URL とデータ配列を必要に応じて変更します。

データは { input1 : value1, input2 : value2 } のようになり、PHP は $_POST['input1'] = value1 および $_POST['input2'] = value2 のようになります。

于 2013-06-01T03:51:09.573 に答える