更改预加载的内容[AJAX]

Question

My files: signup.php, form.php, success.php, failure.php.

In signup.php there's an area <div id="myarea"></div>. Inside of this block I load the form.php by default via <?php include ("form.php"); ?>.

Now I want to show the success.php or failure.php whether the signup was successfull or not.

My Question: How can I replace the content/loaded file in myarea? (Until now I did not wrote the file the data of the form is sent to.)

EDIT: I'm new to php and so on

Answer 1

This is not using ES2017, but it is a simple example and will give you the general idea.

I assume you are using ajax to verify the login, so something like below.

When you come back from the ajax (that is, inside the ajax .done() or .success or whatever-you-use function, you can either use $.load() to load the new content and $('#myarea').html() to replace the content of the #myarea div, or even something as simple as $('#someHiddenDiv').show() to reveal a previously hidden div.

Here is a simplistic example:

var my_id = $('#loginid').val();
var my_pw = $('#loginpw').val();
$.ajax({
    type: 'post',
     url: 'ajax/login.php',
    data: 'id=' +my_id+ '&pw=' +my_pw,
}).done(function(recd){
    if (recd==1) {
        var newhtml = $.load('success.php');
        $('#myarea').html(newhtml);
        //-OR-
        //$('#myhiddendiv').show();
    }else{
        $('#loginid').val('');
        $('#loginpw').val('');
        alert('Please try logging in again');
    }
});

---

Now that you see a very basic example, here is how we do it these days:

How to do AJAX in 2018

Understanding the Fetch API

Async/Await in 2017