单击锚标记后，如何从功能页面调用特定功能

Question

Before i go on, I'm aware that this question has been asked a couple of times but it doesn't deal with specificity.

I have a functions.php script which contains a couple of functions and i would like to call a specific function when the user clicks on an anchor tag.

I have gone through most of the questions in this manner and i understand that this would be done through javascript and ajax load the page specified with the on-click attribute.

My question is when this happens(page is being loaded) how do I call a specific function out of the functions.php script and if I have required it on the current page where the anchor tag exists will it cause complications?

To be more precise i have a register.php page which does the following; take user data then validate, if validated insert into DB and send a mail to the user to verify his account then redirect to a registration_complete.php page which has the option of resending the link if user didn't receive it. Hence clicking the link will run a specific mail function in the functions.php file.

The Code is written below

register.php

<?php 
 session_start();
 $_SESSION['name'] = hmtspecialchars($_POST['name']);

 //validation code goes here
  if (isset ($_POST)){ //check that fields are not empty etc...
                       // insert into db code...
                       // email the user code...
                       // redirect to registration_complete.php code..
  } 

?>
<form method='post' action="">
  <input type="text" name="name" id="name">
  <input type="text" name="email" id="email">
  <input type= "submit" value="submit">
</form>

registration_complete.php

<?php
 require'functions.php'
 session_start();
 $Name = $_SESSION['name']
 $RegisterationComplete = "Thank you . ' ' . ' $Name' . ' ' . for registering pls click on the link in the email sent to the email address you provided to verify you account. If you didn't recieve the email click on the resend email link below to get on resent to you. Please make sure to check your spam folder if you did not see it in your inbox folder."
?>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
  function doSomething() {
    $.get("somepage.php");
    return false;
  }
</script>
<a href="#" onclick="do something">Resend Verification Link</a>

Please not that i have copied the js code from one of the answers related to my question

functions.php

<?php 
  //connect to db code

  // insert into db code

  // send verification link code using PHP Mailer function..

?>

So when ajax loads the functions.php page how does javascript call the exact function(PHP Mailer).

I just want to state that i am new to programming i'm only a bit conversant with php. My knowledge of Javascript and Ajax can be said to be negligible. Also want to say a big thank you to all contributors.

Answer 1

Javascript will never call PHP functions, since PHP is running on the server and Javascript is running in the web-browser. The server and the web-browser are assumed to be different machines, the only exception being testing by developers. Therefore, if you have a function in functions.php called foo, Javascript will not be able to call it.

As you have already mentioned in your question, this might involve AJAX, which is surely true, but let's be more exact: when your Javascript code intends to "execute" a PHP function, it needs to trigger a request to the server. Not necessarily with AJAX, as you can trigger form submission, or anchor click as well. The request will reach the server, which will handle it.

Now, since we know that the life cycle is as follows:

• Javascript detects that foo has to be executed
• Javascript triggers a request to the server
• Server is requested
• Server handles the request
• Server responds

The missing piece in the puzzle is to let the server know that it has to execute foo. To achieve this, the server has to determine somehow whether foo needs to be executed. This can be done with various way, including get params or post params. Next, you need to modify your Javascript code or html structure to let the server know that the function needs to be executed.

You can add a get parameter to the href of the anchor tag, for instance, but in general, you need to let the server know what the intention is and at server-side you need to handle that intention.

Also, you are doing validation on the server. This is ok, but may I advise you to validate the inputs on client-side and prevent posting if the input is invalid, to reduce server load... On server-side, if the post is valid, you need to execute the needed functions.

Also, this part is not exactly correct:

if (isset ($_POST)){

This is not the right approach to check whether this was a post request. You need

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

instead.

Answer 2

It is not important if the Request comes from javascript or a regular server Request (user clicks on link). You need to check the GET or POST parameters and redirect the Request to a specific function.

<?php
if( isset( $_GET['method'] ) ) {
    // NOTE: untested and REALY unsecure Code
    $method = $_GET['method'];

    if( function_exists( $method ) ) {
        call_user_func( $method );
    }
}
else {
    echo '<a id="link" href="?method=foo">klickme</a>';
}


function foo(){
    echo 'in method';
}

?>
<div id="answer"><!-- server answer here --></div>

when you now have a link

http://yourSite.com?method=foo

and the function foo gets executed.

Now the JS part you have to check if the user clicks on a link, or sends a form. Then you have to send the request to server using Ajax and handle the result from the Server.

// inject the serverData in DOM
function loadSuccess( e ) {
    document.getElementById( 'answer' ).innerHTML = e.target.response;
}
// handle click, open ajax request
function doClick( e ) {
    e.preventDefault();
    var ajax = new XMLHttpRequest();
    ajax.open("GET", e.target.href ,true);
    ajax.send();
    ajax.addEventListener('load', loadSuccess);
}

var link = document.getElementById( 'link' );
link.addEventListener( 'click', doClick );