苦苦思索如何将普通的 PHP 表单转换为使用 JQuery 提交的表单？

Question

I have been reading lots of articles and also questions here on SO but I am still confused how to implement the functionality into my own work and would much appreciate some helpful pointers.

What I have already is a page with two separate forms - one is a simple search with some drop-down menus and text box inputs - I think this one should be a lot easier to implement.

The advanced search form includes the simple search values by copying anything in the simple search fields into some hidden inputs. This form is also based around a row of three dropdowns that is cloned and removed at the users will to allow for any number of inputs to be searched for.

The main confusion I have is my forms action point to the same page where I have all of my php code to take the values and construct a MySQL query etc so I don't know how to use the success part of the AJAX request.

The complete code for the page, should you wish to see it, is here

A Fiddle showing the advanced search is here: Advanced Seach Fiddle

So bascially, what I am looking to try and find out is how to turn a static form that works perfectly into one that submits with JQuery and shows a nice 'searching' preloader etc.

Answer 1

There are 2 ways to proceed here:

1. Split page rendering and search processing code. Search processing code should return search results in a particular format (HTML, XML, JSON). After getting search results you can display them in whatever way you need.

2. Keep your code as it is and parse data returned by AJAX call to extract search results section from it. If you go this way AJAX call will return full page as a result. So using jQuery's find method you will need to extract search results section from it.

Does this answer your question?

Answer 2

We'll, you've certainly done the hard work here;-) the jQuery side of it is fairly straight forward. You query your server with the serialized form data. Something to get you on the right track:

$form = $('.advancedsearchform');

$form.submit(function() {

    $.ajax($form.attr('action'), {
      data: $form.serialize(),
      dataType: 'JSON',
      type: 'post', 

          beforeSend: function() {
            var $load = $('#loadingmessage');
            if (!$load.length)
            {
                $load = $('<div id="loadingmessage">').appendTo($form);
            }
            $load.html('Loading... Please wait...');
        },

        success: function(response) {
            // response is the text sent back by server
            // maybe you could use json_encode in PHP with a success message?
        },

        complete: function() {
            // Hide loading message:
            $('#loadingmessage').hide();
        }
    });

      return false; // Cancel default event
});

Answer 3

Use the jQuery Form Plugin . It's a dead simple way to AJAXify an existing form.