为什么我不能从jQuery / AJAX调用这个PHP文件？

Question

I have this piece of code in PHP (path: ../wp-content/plugins/freework/fw-freework.php)

<div id="new-concept-form">
        <form method="post" action="../wp-admin/admin.php?page=FreeWorkSlug" class="form-inline" role="form" onsubmit="addNewConcept()">
            <div class="form-group">
                <label for="new_concept_text">Nuovo concetto:</label>
                <input type="text" class="form-control" id="new_concept_text">
            </div>
            <div class="form-group">
                <label for="new_concept_lang">Lingua:</label>
                <select class="form-control" id="new_concept_lang">
                    <option>it</option>
                    <option>en</option>
                    <option>de</option>
                    <option>fr</option>
                </select>
            </div>
            <button type="submit" class="button-aggiungi btn btn-default">Aggiungi</button>
        </form>
    </div>

When the button is pressed, this javascript is called (it works as the alert is showed and the data is retrieved correctly):

var ajaxphp = '../wp-content/plugins/freework/fw-ajaxphp.php';

function addNewConcept()
{
conceptName = document.getElementById('new_concept_text').value;
lang = document.getElementById('new_concept_lang').value;

alert('Inserting: ' + conceptName + " " + lang);

$.ajax({
    type: 'POST',
    url: ajaxphp,
    async: true,
    dataType: 'json',
    data: {conceptNm : conceptName, conceptLang : lang },
    success: function() {
        alert("--------------------------------  Data sent!!");
        console.log("--------------------------------  Data sent!!");
    }

});

return true;
}

Now, as you can see in the javascript, I would like to call another PHP file through ajax ( the alert and the console.log in the success function are not called / can't be reached).

<?php
// HTML Page -> JavaScript -> fw-ajaxphp.php -> XML Vocabulary

echo 'alert("PHP called")';
// echo $_POST['conceptNm'];
// TODO change vocab when done testing
$xml_file = '../wp-content/plugins/freework/fw-custom-vocabulary-test.xml';

$xml_vocab = new DOMDocument;
if (isset($_POST['conceptNm']) && isset($_POST['conceptLang']))
{
    // ADD NEW CONCEPT
    echo 'alert("PHP chiamato")';
    // irrelevant business code here...
    echo 'alert("Modifica avvenuta")';
}
?>

JQuery/Bootstrapp ecc... are all included both in the master html file and in the HTML-generator PHP file (work correctly).

Yet, I can't seem to call this php file which holds all the server logic as response to the button. The business code is irrelevent, as the button trigger hould at least call the alert outside of the if condition. I have followed all answers on stack-overflow relative to this issue, yet it's not working. I also tried to add the full path to the variables but nothing. As you can see, all my files are in this folder: Files on Server. So why can't I call that server-side PHP script? Thank you.

EDIT: I solved this by using a completely new approach! I leave jQuery away, I will recharge the page everytime someone submits the form and I will retrieve the data throught POST in the very same file that generates the HTML. Why coulnd't I call the server from javascript? Frankly I don't know. In other cases it has always worked. Thank you all anyway.

Answer 1

This is your problem:

$.ajax({
    type: 'POST',
    url: ajaxphp,
    async: true,
    dataType: 'json',
    ^^^^^^^^^^^^^^^^ Wrong data type

Then you do:

<?php
// HTML Page -> JavaScript -> fw-ajaxphp.php -> XML Vocabulary

echo 'alert("PHP called")';
...

You are specifying that the returned data type is json. However, in your php script you are echoing strings so your ajax call will fail as jQuery cannot parse the returned data as json.

Removing the dataType line should solve your problem but note that then you cannot use the returned data as an object. But that should not matter in this specific example as you are not using the returned data at all.