用AJAX表单提交

时间:2012-09-07 08:33:59

标签: php forms codeigniter jquery

所以这是我在localhost中的问题。我将搜索参数传递给我的Home控制器,如:

<form method="post" action="<?=site_url('home/index');?>"> 

当我这样做时,我的ajax菜单正确填充

       ----------
SEARCH:| mot    |
        ----------------------------
       | motorcyles ...            |
       | motorhomes ...            |
       | motorola ..               |
       -----------------------------

在我的网络服务器上,提交表单的唯一方法是使用<form method="post" action="<?site_url('home/index');?>">,如果我将“=”放在那里,它什么都不做。如果我使用

<?php echo site_url('home/index');?>"> 

它也不会显示任何内容。

此外,当我在我的网络服务器上输入搜索字词时

        ----------
 SEARCH:| mot    |
         ---------
没什么,没有错误,没有结果。如果我提交表单,只有在按下提交后才会收到正确的结果。

我的控制器从数据库中获得了正确的结果,以下是我对结果数组进行编码的方法:

if ( $this->input-> is_ajax_request())
    {
        $this->output->set_header("Cache-Control: no-cache, must-revalidate");
        $this->output->set_header("Expires:Mon, 4 Apr 1994 04:44:44 GMT");
        $this->output->set_header("Content-type:application/json");

        echo json_encode($results);
        exit();

    }

    else {

        $data['results'] = $results;

         }

我的js文件没有错误。我关掉了CSRF。为什么会这样?

$(document).ready(function() {

    var action= $('form').attr('action');
    var results = $('#results');

    function ajax_search(search) {

        $.post(action, {
            search: search
        }, function(data) {

            if(data.length) {

                var el = $('<ul/>');

                $.each(data,function(i,item){
                    $(el).append('<li><span class="Course_Name">' + 
                    item.course_name_highlighted + '</span> &ndash; <span class="FirstName">' + item.FirstName + '</span> &ndash; <span class="LastName">' 
                    + item.LastName + '</span> &ndash; <span class="COURSE_ID">'+item.COURSE_ID +'\n</span></li>');
                });

                $(results).empty().append(el);
            }



            else{
                $(results).empty();
            }
        }, 'json');

    }




    $('#search').keyup(function() {

        var search = $(this).val().replace(/^\s+l\s+$/g, "");

        if(search.length > 1)

        {
            clearTimeout($.data(this, 'timer'));

            var wait = setTimeout(function() 
            {
                ajax_search(search)

            }, 400);

            $.data(this,'timer', wait);
        }

    });

});

4 个答案:

答案 0 :(得分:1)

而不是表单提交,您希望在键盘事件正确后显示结果(即:当有人输入时)?

尝试

$("input[name='search']").on('keyup', function(){

     var $this = $(this),
         results = $("#results"),
         timeout = '';

     // ------ delayed keyup event  ------//

     //reset initial timeout
     if(timeout)
     {
         window.clearTimeout(timeout);
         timeout = NULL;
     }
     // ------Timeout Listener ----- //
     timeout = window.setTimeout(function(){
        //send ajax request
        var searchTerm = $this.val();

     }, 1000);  // listens for when last key has been pressed after 1sec

});

答案 1 :(得分:0)

jQuery ajaxSubmit在这里可能对你很方便。 http://be.twixt.us/jquery/formSubmission.php

或 $(“#formId”)。ajaxSubmit({url:'xxx.php',type:'post'})

或 $(“#formId”)。ajaxForm({url:'xxx.php',type:'post'})

或者你可以使用 $ .post('xxx.php',$('#formId')。serialize())

注意:$ .post只是jQuery ajax的一小部分,但有些不同。

答案 2 :(得分:0)

如果您希望在用户输入任何内容时显示结果。用户jquery ajax表单submition而不是normal form submition。

即使在文档加载时也使用keyup赞:

$(document).ready(function() {
var dataString = 'searchword='+ searchbox;
   $(".search").keyup(function() 
      $.ajax({
        type: "POST",
        url: "relative path to file", //this is the file which you normally use with action=""
        data: dataString,
        cache: false,
        success: function(data){
          "do whatever you want with data, example append or prepend data to any div";
        }
        });
      });
   });
});

并使用like语句与查询在索引文件上显示结果

$q=$_POST['searchword'];

mysql_query("select * from table where fieldname like '%q%' order by fieldname LIMIT 5") or die(mysql_error());

使用while语句获取结果后......

答案 3 :(得分:0)

你想要按键上的数据,所以把你的ajax或ajax + jquery函数放在onkeypress事件上。对于获取数据,您可以使用$ .post,$ .ajax,$ .get jquery方法,或者您可以使用简单的ajax函数来检索中间文件中的数据。