0

名前と日付に基づいてトランザクションのリストを表示するフォームがあります。

<form id="form1" name="form1" method="post" action="<?php echo base_url() ?>options/history">
  Name
  <input name="name" type="text" id="name" />
  date
  <input name="date" type="text" id="date" />
  <input name="find" type="submit" id="find" value="find" />
</form>

フォームが送信されると、関連するすべての詳細が表示されます。

jqueryを使用して同じページにデータをロードする方法を誰かに説明してもらえますか?

私はjqueryと学習の初心者です。私はいくつかの調査を行い、以下が私が見つけたものです：

 <script type="text/javascript">
        $(document).ready(function() {
            $('#find').click(function() {
                $.ajax({
                    type: "GET",
                    cache: false,
                    url: "<?php echo base_url() ?>options/history",
                    success: function(data) {
                       alert('Data Loaded');
                    }
                });
            });

        });
    </script>

また、フォーム変数をコントローラーに渡すにはどうすればよいですか? 値をコントローラーに直接渡すことは可能ですか、それとも URL と一緒に渡す必要がありますか?

4

2 に答える 2

0 
<script type="text/javascript">
    $(document).ready(function() {
        $('#form1').submit(function() {
            // get the data of the form
            var data_form = $('#form1').serialize(); 
            $.ajax({
                type: "GET",
                cache: false,
                data: data_form,
                url: "<?php echo base_url() ?>options/history",
                success: function(data) {
                   alert('Data Loaded');
                   // Your data is in the var data returned, you can use it with, for example: $("#content").html(data);

                }
            });
            // Prevent default behaviour
            return false;
        });

    });
</script>
于 2013-01-15T19:12:28.523 に答える
0

ここで少し混乱しています。しかし、私はあなたが実際にこれを望んでいると思います:

$('form#form1').submit(function(evt){
  $.ajax({
    type: "GET",
    data: $(this).serialize(),
    cache: false,
    url: "<?php echo base_url() ?>options/history",
    success: function (data) {
      alert('Data Loaded');
    }
  });
  evt.preventDefault();
  return false;
});

.submit()代わりにJavaScript のsubmitイベントにバインドするために使用できます。このハンドラーの最後に戻ることfalseで、上記のようにフォームの送信を停止できます。または、 を使用してevt.preventDefault()。

のdataプロパティは$.ajax、サーバーに送信されるデータを指定します。使用できるこのデータの取得に関しては.serialize()、送信する準備ができているフォーム要素をエンコードします。

于 2013-01-15T19:12:36.737 に答える