开发者

I want to know how to show a "loading" image when a form is submitted by action="any.php"

I want show Loader img with jQuery when you post by PHP Simple action="search.php" Not ajax post or jquery post and Thanx 开发者_StackOverflowfor all


This problem is not solvable in a meaningful way without the use of AJAX. In other words, you need AJAX to show a "loading" image while the response from a form submission is handled by the server.

If I understand you correctly, then you have a form:

<form action="search.php" method="post">
    ...
</form>

And it is handled as a regular HTML form. The data is passed by the page to the server that uses PHP to handle it. Without AJAX, you have no good way of finding out when the response of the form, the search results, are ready.

Generally, what is done is that the form is submitted to the server with the use of AJAX. The form is handled by the server (PHP does its stuff). During this time, a "searching" image is shown. Then when the server responds, the image is removed and the search results are shown.

Using jQuery and AJAX on a page this could be done like this:

jsFiddle example

  // The form has an id of "theForm".
  // This function defines what happens when it is submitted.
$('#theForm').submit(function() {

      // Replace the form w the search icon.
    $("#theForm").html('Searching...<br/>' +
        '<img src="http://i.stack.imgur.com/ZK0sq.gif" />');

      // Make the search request to the PHP page.
      // The 3 arguments are: 
      //     1 - The url. 2 - the data sent 
      //     3 - The function called when data is sent back
    $.post("/ajax_html_echo/", $(this).serialize(), function(result){

          // Here we replace the search image with the data
        $("#page").html(response);
    });

      // Cancel the regular submission of the form.
      // You have to do this, or the page will change and things won't work.
    return false;
});

The nice thing about the above is that it degrades nicely if JS is off, since you still have the regular HTML form and its regular submit functionality to fall back on, and if JS is on, then it blocks this regular functionality with the return false and uses the AJAX.

Jquery used:
.submit()
.html()
.post()
.serialize()

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜