如何使用Jquery调用PHP函数并捕获返回类型

Question

I want to call PHP function with the help of JQuery and I also want that Jquery code catch the return type of the calling function for further processing...........

My jQuery code is:

$(document).ready(function(){ 
    $('#ibtn_save').click(function(){ 
        $.post('PHP/newdep.php', { dep_id: newdep.itext_depid.value }, function(result){ 
            if(result == 'exist'){ 
                $('#error_div').html(result).show(); 
            } 
        }); 
    }); 
}); 

My PHP Code is:

<?php 
    if ($_SERVER["REQUEST_METHOD"] == "POST") { 
        $deptid = mysql_real_escape_string($_POST['dep_id']); 
        $catcher = save_fxn($deptid); 
        echo $catcher; 
    } 

    function save_fxn($ltxt_deptid) 
    { 
        $query = "SELECT * FROM table_mstr_department WHERE DeptId='$ltxt_deptid'"; 
        $query_result = mysql_query($query); 
        if (is_resource($query_result) && mysql_num_rows($query_result) > 0) 
        { 
            $sql_result = mysql_fetch_assoc($query_result); 
            return  "exist"; 
        } 
        else 
        { 
            $query = "INSERT INTO table_mstr_department (DeptId, DeptName) VALUES  ('$ltxt_deptid','$ltxt_deptname')"; 
            $output = mysql_query($query); 
            if (!$output) 
            { 
                echo "Data not inserted successfully!"; 
            } 
            return "success"; 
        } 
    } 
?>

and HTML code is as

Please fix the errors below!

            <p> <label for="dep_id">Department Id :</label> <input id="itext_depid" name="text_depid" type="text" /> <span class="sdepid"></span> </p> 
            <p> <label for="dep_name">Deparment Name :</label>  <input id="text_depname" name="text_depname" type="text" />  <span class="sdepname"></span> </p>

        <input type="submit" id="ibtn_save"  name="btn_save" value="Save">

Answer 1

Well, your code seems ok. Since you haven't specified what is not working for you, I'm going to guess that the page reloads as soon as you press your "Save" button, not giving the ajax call the time to complete and to show your result.

This is happening because you use a type=submit button, which will submit your form after completing the onclick handler. The ajax call is performed, but by the time it returns, the calling page has gone.

There are two ways around this. You could change your input to anything beside a type=submit or type=image, for example, you could use:

<input type="button" id="ibtn_save"  name="btn_save" value="Save">` 

Or, you could have the onclick handler suppress the default action of the submit button, by having it return false:

$(document).ready(function(){ 
    $('#ibtn_save').click(function(){ 
        $.post('PHP/newdep.php', { dep_id: newdep.itext_depid.value }, function(result){ 
            if(result == 'exist'){ 
                $('#error_div').html(result).show(); 
            } 
        });

        return false;
    }); 
}); 

Does this solve your problem? If not, please do specify what behavior you are encountering, and why you would like it to behave differently.