Фильтровать результаты с помощью Jquery - PullRequest
Новая
       45

Фильтровать результаты с помощью Jquery

0 голосов
/ 07 декабря 2009

Я создал форму поиска для скрипта в php. В основном эта форма имеет несколько флажков и кнопку отправки. Каждый флажок является категорией, если я установлю один или несколько флажков, результат будет отфильтрован по категориям.

Вот HTML-код: 

<?php
if ($_POST['do_search'] == 'true') {
$results = 'Do the query and store results in the $results var';
}
?>
    <form method="post" action="search.php" id="search">
     <input type="checkbox" name="categories[]" id="categories[]" value="1">Category 1
     <input type="checkbox" name="categories[]" id="categories[]" value="2">Category 2
     <input type="checkbox" name="categories[]" id="categories[]" value="3">Category 3
     <input type="submit" name="submit">
     <input type="hidden" id="do_search" value="true">
    </form>
    <div id="search_results">
<?php echo $results; ?>
</div>

Я пытаюсь получить результат, встроенный в ajax, для большей части моего скрипта я использую JQuery. Кто-нибудь может помочь мне понять, как передавать данные $ _POST в режиме реального времени через ajax без перезагрузки страницы?

p.s. Я извиняюсь за мой плохой английский, я надеюсь, что я достаточно ясно: |

Ответы [ 4 ]

0 голосов
/ 07 декабря 2009

Идентификаторы должны быть уникальными, формы беспокоятся только об именах. 

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $('#submitButton').click(function()
        {
            var catArray = new Array();
            var j = 0;
            for(var i = 0; i < 3; i++)
            {
                if(document.myForm.categories[i].checked == 1)
                {
                    catArray[j] = document.myForm.categories[i].value;
                    j++;
                }
            }

            // Just put this here so you can see the output
            // alert('array:'+catArray.toString());

            $.ajax(
            {
                type:    "POST",
                url:     "search.php",
                data:    ({ categories : catArray.toString() }),
                success: function(msg)
                {
                    $('#search_results').html(msg);
                }
            });

            return false;
        });
    });
</script>
</head>
<body>
    <form name="myForm" onsubmit="return false">
        Category 1<input type="checkbox" name="categories" id="category1" value="1" />
        Category 2<input type="checkbox" name="categories" id="category2" value="2" />
        Category 3<input type="checkbox" name="categories" id="category3" value="3" />
        <button id="submitButton">Submit</button>
    </form>
    <div id="search_results"></div>
</body>
</html>
0 голосов
/ 07 декабря 2009

начать с этого: 

$('#search').submit(function(){
    var _this = $(this);
    $.post(_this.attr('action'), _this.serialize(), function(result){
        // callback
    });
    return false;
});
0 голосов
/ 07 декабря 2009

Вот довольно подробное руководство по отправке формы AJAX , которое должно ответить на ваши вопросы, хотя мне не нравится, как выполняются параметры запроса. Имеет: 

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
$.ajax({  
  type: "POST",  
  url: "bin/process.php",  
  data: dataString,  
  success: function() {  
    $('#contact_form').html("<div id='message'></div>");  
    $('#message').html("<h2>Contact Form Submitted!</h2>")  
    .append("<p>We will be in touch soon.</p>")  
    .hide()  
    .fadeIn(1500, function() {  
      $('#message').append("<img id='checkmark' src='images/check.png' />");  
    });  
  }  
});

Я бы вместо этого сделал: 

$.ajax({  
  type: "POST",  
  url: "bin/process.php",  
  data: {
    name: name,
    email: email,
    phone: phone
  },
  success: function() {  
    $('#contact_form').html("<div id='message'></div>");  
    $('#message').html("<h2>Contact Form Submitted!</h2>")  
    .append("<p>We will be in touch soon.</p>")  
    .hide()  
    .fadeIn(1500, function() {  
      $('#message').append("<img id='checkmark' src='images/check.png' />");  
    });  
  }  
});

Если вы хотите автоматически создавать переменные формы, а не делать это автоматически, взгляните на Сериализация формы в JSON с jQuery .

0 голосов
/ 07 декабря 2009

Внутри jQuery, когда вы делаете запрос AJAX, вы звоните: 

jQuery.ajax(options)

В вашем объекте параметров убедитесь, что вы установили элемент данных. Этот член сериализует объект javascript в данные поста.

Затем вы можете перехватить отправку формы и отправить ее через AJAX, создав запрос из действия и поля формы.

В качестве альтернативы вы можете использовать более простой 

jQuery.post()

функция.

http://docs.jquery.com/Ajax

...