简体   繁体   中英

How to call ajax and output its result inside div and textarea?

I am trying to make load more button. My goal is to call ajax and put the response inside div and textarea.how to place the response inside div and textarea? Currently the response only shows in messagebox but i want to append the result into div.

* Note: *Response is html hyperlinks produced by process.php and i want those hyperlinks placed inside the div

<html>
<head>
 <script>

//initialize page number to 1 default
   var pagenumber=1;

//pass pagenumber to function to fetch correct page records

function getResult(pagenumber){
     alert('me here'+pagenumber);


 $.ajax(
{

    type: 'GET',
    url: './process.php?ID=1234&type=1&moviePath=1234/1212/Love&title=Love&page='+pagenumber,
    data: $("#myform").serialize(),

     data: {

     },
            success: function (good)
            {
              //handle success

                  alert(good)
            },
            failure: function (bad)
            {
               //handle any errors

                alert(bad)

            }



});

//after every call increment page number value
    pagenumber++;
}// end of getResult Function



function addMoreItems()
{
pagenumber++;
getResult(pagenumber);

}
</script>
</head>

<body>



<div id="myDiv"></div>

<div class="MoreButtonSection">      
    <div class="RedButton">
      <span class="LeftEnd"></span>
      <span class="Centre"><a href="javascript:void(0);" onclick="addMoreItems();" title="See more">see more</a></span>
      <span class="RightEnd"></span>
    </div>
  </div>
<br>


<br>
 <form id="myform" name="myform" action="./2.php?Id=&title=" method="post">
    <td>
    <textarea rows="7" cols="15" name="outputtext" style="width: 99%;"></textarea>
    </td>
    </form>
</html>

There are a number of issues.

  1. There is no indication that you've included jQuery.

  2. You've declared data: twice.

  3. As Dmitry pointed out, you should probably be posting this.

  4. And finally, where are you actually calling getResult()? It doesn't look like it's being called.

In addition, it is worth noting that from jQuery 1.8 and higher, .success() and .failure() are now deprecated and have been replaced with .done() and .fail(). http://api.jquery.com/jQuery.ajax/

You say your result is only showing in the message box, instead of alerting it, simply append. Assuming the below div is what you want to append to:

<div id="myDiv"></div>

You can modify your success function:

success: function (good)
    {
          //handle success
          $("#myDiv").append(good);
    },

Also, get rid of that second data: {}, -- it's doing nothing.

I tend to use jQuery in these situations to make life a little easier, and work with the $('#yourDiv').append() function. For instance you can create variables ie var mug; and once it is filled with your data append mug to the document through $('#yourDiv').append("<p>"+mug+"</p>);

An example - Ajax Twitter API call that returns tweets to specific lists within a div ( page source )

Hope that helps!

I think I get what you are trying to do but that code is a mess. As @David L has stated, you need jQuery. But then you do not need all the code you have written. It can be done in a few simple lines. Please replace the actual element selectors with your correct ones.

function addMoreItems() {
    pagenumber++;

    // get form values
    var params = $('#myform').serializeArray();

    // add predefined values
    params.push({name: 'ID', value: '1234'});
    params.push({name: 'type', value: '1'});
    params.push({name: 'moviePath', value: '1234/1212/Love'});
    params.push({name: 'title', value: 'Love'});
    params.push({name: 'page', value: pagenumber});

    // do request and insert response from server in div with id='divresults'
    $.get('process.php', params, function(data) {
        $('#divResults').append(data);
    });

}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM