AJAX-按钮提交以更新表单

Question

I'm attempting to learn to make use of AJAX. I removed most of the complexity of the program to just isolate the problem I'm having. So I have a text area and beneath that a div that has "STATUS" printing out. On button submit using AJAX I want to change the word "STATUS" to the value of my variable, status, which in this case should be "SUCCESS".

What happens instead when I click is it prints out the word STATUS. It appears like nothing is happening when I click my submit button. Any ideas what I am doing wrong?

$(document).ready(
    function () {
        $('#sub').live('click',
            function () {
                url = 'http://whatever.php'
                success = "Success!"
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: null
                    dataType: 'xml',
                    async: false,
                    success: function (data, statusText, reqObj) {
                        status = $(data).find('status').text()

                        if (status == 'SUCCESS') {
                            $('#succ').html(status)
                        } //if( status == 'SUCCESS' ) {
                        else {
                            msg = $(data).find('msg').text()
                            alert('NOT ADDED: ' + msg)
                            return
                        } // else
                    } //function()
                }) //$.ajax( {
            } /* function */ ) //live(
    } //function()
) //$(document).ready

HTML:

<div id="buttonArea">
<textarea name="txtarea" cols=80 rows=30>>THIS TEXT BOX
             IS USED FOR THINGS I WILL WORK ON LATER
</textarea><br/>    
<input type=submit value='Submit Textbox Info!' id='sub'>
</div>

<div class="float-left" id='succ'>STATUS</div>

Answer 1

I think your find is empty. Try to replace with

status = $(data).text()

Answer 2

I'm not sure you use .find() the right way. it's used on html elements and expects to be passed a jquery selector or element or jquery object.

here's more details http://api.jquery.com/find/

what you want is to get your response text, so assign your ajax call to a variable:

xmlhttp = $.ajax({

then on success use your response text:

status = xmlhttp.responseText;

Answer 3

Your code works fine for me, on the proviso that:

(i) you add the missing comma from the line:

data: null,

(ii) the content-type returned by your php handler is text/xml