JQuery запрос: передача сообщения без новой загрузки страницы - PullRequest
1 голос
/ 09 мая 2009

Пожалуйста, прости неловкость этого вопроса, я, честно говоря, не знаю, как сформулировать лучший запрос ...

Ситуация:

У меня есть базовая контактная форма на странице xhtml / php, которую я обновляю. Недавно я добавил новый несвязанный плагин jquery на этой странице, поэтому я хотел бы использовать функциональность jquery, чтобы помочь с простой проверкой формы, если это возможно. Проверка уже выполняется через PHP в отдельном файле, представленном контактной формой.

Я хочу, чтобы сообщение о проверке PHP передавалось обратно на главную страницу (контактную форму) без новой загрузки страницы. Я видел это с помощью jquery где-то, но я не могу найти это снова ни здесь, ни через Google. Кто-нибудь может помочь?

Мне действительно нужна скорость и простота, и, на первый взгляд, плагин проверки jquery устарел по своим размерам и сложности, поэтому мне не терпится пойти именно по этому маршруту ...

1 Ответ

2 голосов
/ 09 мая 2009

То, что вы ищете, известно как AJAX, и в этом нет ничего сложного, особенно с jQuery! Проблема с отправкой данных в PHP для проверки заключается в том, что они немедленно отменят ваше требование «скорости» - форма должна будет зависнуть, пока Javascript отправляет запрос на сервер, чтобы проверить, все ли в порядке. По этой причине обычной практикой является проверка на как на стороне сервера, так и на стороне клиента. Заметьте, я говорю и то и другое, так как всегда проверяет данные на сервере.

Имея это в виду, давайте начнем! Я собираюсь показать, как проверять форму, не используя плагин проверки - для больших проектов, возможно, вы захотите рассмотреть его, но без него это достаточно просто:

<form id='myform' action='whatever.php' method='POST'>
First Name: <input type='text' name='first_name' class='required'><br>
Last Name: <input type='text' name='last_name'><br>
Email: <input type='text' name='email' class='required'><br>
Zip: <input type='text' name='zip'><br>
</form>

Итак, как вы видите, у нас есть имя и адрес электронной почты с классом требуемых, поэтому мы можем сделать это:

$(function() { // wait for the document to be loaded
    $('#myform').submit(function() {
        var valid = true; // assume everything is okay
        // loop through each required field in this form
        $('input.required', this).each(function() {
            // if the field is empty, mark valid as false
            // and add an error class
            if($.trim($(this).val()) == '') {
                valid = false;
                $(this).addClass('error_input');
            }
        });

        // additional validation for email, zip, perhaps

        return valid; // if valid is true, continue form submission
    });
});

Плагин Validation делает все это более аккуратным и понятным, но если вам просто нужно сделать быструю форму, нет ничего плохого в подходе выше. Это плохо, потому что вы должны иметь свои правила проверки в двух местах, но кроме выполнения Javascript на сервере или вызова сервера для данных, нет альтернативы, если вы хотите быстро сообщить своим пользователям, что что-то не так.

Надеюсь, это поможет.

РЕДАКТИРОВАТЬ : Кажется, я неправильно понял ваш вопрос. Если вы хотите передать данные формы в PHP-скрипт, проверить его значения и вернуть успех или ошибку обратно на страницу без загрузки, вы должны сделать что-то вроде этого:

$('#myform').submit(function() {
    // allow submit if we've validated this already
    if($(this).data('done')) return true;
    var data = $(this).serialize(); // serialize the form data
    // you could get the two variables below from the actual form (DRY)
    // with $(this).attr('action'); and $(this).attr('method'); but I am
    // not sure if that is what you want...
    var action = 'validate.php'; // what script will process this
    var method = 'POST'; // type of request to make
    $.ajax({
        type: method,
        url: action, 
        data: data,
        dataType: 'json',
        success: function(d) {
            if(d.code == 'success') {
                 // everything went alright, submit
                 $(this).data('done', true).submit();
            } else {
                 alert('something is wrong!');
            }
        }
    });
    return false; // don't submit until we hear back from server   
});

И тогда все, что нужно сделать вашему PHP-скрипту, это вернуть что-то вроде этого, используя json_encode, чтобы указать, все ли в порядке:

// verify everything...
// data will be in $_POST just like a normal request
if($everythingOK) {
    $code = 'success';
} else {
    $code = 'error';
}
print json_encode(array('code' => $code));
exit;

Я не тестировал Javascript выше, но я уверен, что он должен быть верным. Я надеюсь , это помогает. :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...