最简单的表单提交没有重定向？

Question

So I have been killing myself on this project, maybe because I tried doing it the hard way :) I have been trying to convert the following dynamic PHP form to be submitting the same info, but via AJAX which I have no experience in, but I wanted to submit without leaving the page.

While researching "Things Every PHP Coder Should Know" (http://terrychay.com/article/php-coders.shtml) while preparing to phone interview a potential programmer, I was introduced a different method of accomplishing the same task using remote scripting and an iframe. Realizing there could be dozens of ways of doing this, what would be the "best" way to take the following form, and submit it without leaving the page? Since I know PHP best, is there one that would be better suited to me or should I keep going with AJAX?

<form action="functions.php?do=save" method="POST" id="saveSettings">
<table width=100%>
<tr><th>Setting</th><th>Value</th><th>Active</th></tr>
<?
include 'db.php';

$i=0;
    foreach($db->query('SELECT * from settings') as $row) {
    echo ($i % 2)?'<tr class="odd">':'<tr class="even">';
        print_r("<td width=200>" . $row[1] . "</td>
        <td><input type=\"textbox\" name=\"" . $row[1] . "[]\" value=\"" . $row[2] . "\"></td> 
        <td><input type=\"hidden\" name=\"" . $row[1] . "[1]\" value=\"INACTIVE\"> "); //set value so it never passes NULL
            if ($row[3] == "ACTIVE"){
            print_r("<input type=\"checkbox\" name=\"" . $row[1] . "[1]\" value=\"ACTIVE\" checked=\"true\"></td></tr>");
            }
            else{
            print_r("<input type=\"checkbox\" name=\"" . $row[1] . "[1]\" value=\"ACTIVE\"></td></tr>");

            }
    $i++;
    }
?>
</tbody>
</table>
<input type="submit" value="Save Settings">
</form>

Answer 1

It's quite simple, really, all you need to do is the following jQuery:

$('form').on('submit', function(){
    var $this = $(this);
    $.ajax({
        type: $this.prop('method'),
        url: $this.prop('action'),
        data: $this.serialize(),
        success: function(data){
          //do something with the return of the php script
        }
    });
    return false; //prevent the form from causing the page to refresh
});

$.serialize() is used to turn the form into a text string that is URL encoded. This makes it simple to get the values in the php script as nothing should change given the structure of your form above.