Trying to use answer for "ajax-tutorial-for-post-and-get"

Question

I've studied and tried to implement the Second answer in this post: Ajax tutorial for post and get

Unfortunately, running the $.ajax script inside a function kicked off by an "onclick" only shows the alert, no other change in the display. Is there a better way to perform that $.ajax process?

Here is my "given" html (referenced within my "subject" html):

<!DOCTYPE html>
<html>
<body>

<p>Cjax at your service</p>

<br><p>"Hello World!"</p>

</body>
</html>

And here is my "subject" (calling) html:

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">

function ajaxAppend() {

  alert('ajaxAppend Function called');
  var myusername = $("#username").val();
  $.ajax({
    type: "GET",
    url: "Cjax01.html",
    data: "username=" + myusername,
    cache: false,
    success: function(data){
       $("#resultarea").text(data);
    }
  });
}
</script>

<p>PHP, not ASP can output plain text:</p>
<input type="text" name="username" id="username">
<div id="resultarea"></div>
<br>
<input type="text" name="results" id="results" value="Duck"><br>
<button onclick="ajaxAppend()">Try it</button>

</body>
</html>

Appreciations in advance...

And to debug it, open your browser console to check for error — A. Wolff, Jul 12 '17 at 09:04

score 1 · Answer 1 · answered Jul 12 '17 at 09:13

1st : You forgot to include jquery link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

2nd : your returning html not text so change this line $("#resultarea").text(data); to $("#resultarea").html(data);

$.ajax({
    type: "GET",
    url: "Cjax01.html",
    data: "username=" + myusername,
    cache: false,
    success: function(data){
       $("#resultarea").html(data);
    }
  });

Geneous42 · Answer 2 · 2017-07-12T18:27:51.807

A statement like this is needed in the "subject" script:

 <script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

This does, however copy the whole "given" .html file (including all of the <> flags) into the "results" area of the subject file, without any usual formatting (e.g. it's treated like ordinary text). When I turned the .html file into a .php file, the php pre-edit occurred, but then the resultant .html was again treated like pain text and !? Looks like some parsing would help!

Trying to use answer for "ajax-tutorial-for-post-and-get"

2 Answers2