使用Json从$ .ajax发送的PHP文件中获取数据

Question

As I need to bring separate data from a php file, and create an HTML piece to be injected with jQuery, I've choosen Json.

I send it from my PHP main file (between script tags) like this:

$.ajax({dataType: "json", url:'course_generator.php', data:{co_subj_co:editedCourseId}}).done(function(newCourse){
    var newCourseStructure = '<div class="tableRow dynamicRow noHeight injectedRow" data-isMultisubjectValue="'+isMultisubjectValue+'" data-subjectsNum="'+subjectsNum+'" data-id="'+courseId+'" id="'+courseId+'" data-abbrev="'+newCourseAbbrev+'" data-courseTypeId="'+newCourseTypeId+'" title="'+newCourseName+'"><div class="contentColumn40"><span class="tableContentText">'+newCourseName+' ('+newCourseTypeName+')</span></div><div class="contentColumn40">'+subjectList+'</div><div class="contentColumn10"><div class="tableIconLink"><a href="#"><div class="editIcon" data-id="'+courseId+'" title="Editar '+newCourseName+'"></div></a></div></div><div class="contentColumn10"><div class="tableIconLink"><a href="#"><div data-id="'+courseId+'" class="discontinueIcon" title="Discontinuar '+newCourseName+'"></div></a></div></div></div>';}

This sends properly editedCourseId value. And what's inside course_generator.php is:

$courseId = $_POST['co_subj_co'];

$select_co = mysql_query("SELECT * FROM course_conf JOIN course_type ON co_fk_ct_id=ct_id JOIN co_rel_subj ON co_subj_co='$courseId' JOIN subject_conf ON su_id=co_subj_subj WHERE co_id='$courseId'");
$result_co = mysql_fetch_array($select_co);

$newCourseId = $result_co['co_id'];
$newCourseName = $result_co['co_name'];
$newCourseAbbrev = $result_co['co_abbrev'];
$newCourseTypeId = $result_co['co_fk_ct_id'];
$newCourseTypeName = $result_co['ct_name'];
$isMultisubjectValue = $result_co['co_multisubject'];

$newCourseValues = '{"newCourseId":'.$newCourseId.',"newCourseName":'.$newCourseName.',"newCourseAbbrev":'.$newCourseAbbrev.',"newCourseTypeId":'.$newCourseTypeId.',"newCourseTypeName":'.$newCourseTypeName.',"isMultisubjectValue":'.$isMultisubjectValue.'}';

I am afraid Im not receiving it properly by $courseId = $_POST['co_subj_co']; , and neither $newCourseValues are being received properly on my main PHP file as my newCourseStructure is not generating anything. Could you please identify the several errors I am sure I'm making? Thank you.

---

UPDATE:

After changing my PHP main file to:

$.ajax({type : 'POST', dataType: "json", url:'config/forms/course_conf/course_generator.php', data:{co_subj_co:editedCourseId}}).done(function(newCourse){
var courseId = newCourse.newCourseId;
var newcourseName = newCourse.newCourseName;
var isMultisubjectValue = newCourse.isMultisubjectValue;
var subjectsNum = newCourse.subjectsNum;
var newCourseAbbrev = newCourse.newCourseAbbrev;
var newCourseTypeId = newCourse.newCourseTypeId;
var newCourseTypeName = newCourse.newCourseTypeName;
var newCourseStructure = '<div class="tableRow dynamicRow noHeight injectedRow" data-isMultisubjectValue="'+isMultisubjectValue+'" data-subjectsNum="'+subjectsNum+'" data-id="'+courseId+'" id="'+courseId+'" data-abbrev="'+newCourseAbbrev+'" data-courseTypeId="'+newCourseTypeId+'" title="'+newCourseName+'"><div class="contentColumn40"><span class="tableContentText">'+newCourseName+' ('+newCourseTypeName+')</span></div><div class="contentColumn40">'+subjectList+'</div><div class="contentColumn10"><div class="tableIconLink"><a href="#"><div class="editIcon" data-id="'+courseId+'" title="Editar '+newCourseName+'"></div></a></div></div><div class="contentColumn10"><div class="tableIconLink"><a href="#"><div data-id="'+courseId+'" class="discontinueIcon" title="Discontinuar '+newCourseName+'"></div></a></div></div></div>';}

And my course_generator.php file to:

$courseId = intval($_POST['co_subj_co']);
$subjectList = "";
$data ="";

$select_co = mysql_query("SELECT * FROM course_conf JOIN course_type ON co_fk_ct_id=ct_id JOIN co_rel_subj ON co_subj_co='$courseId' JOIN subject_conf ON su_id=co_subj_subj WHERE co_id='$courseId'");
$result_co = mysql_fetch_array($select_co);

$outArr['newCourseId'] = $result_co['co_id'];
$outArr['newCourseName'] = $result_co['co_name'];
$outArr['newCourseAbbrev'] = $result_co['co_abbrev'];
$outArr['newCourseTypeId'] = $result_co['co_fk_ct_id'];
$outArr['newCourseTypeName'] = $result_co['ct_name'];
$outArr['isMultisubjectValue'] = $result_co['co_multisubject'];

$subjectsNum=mysql_num_rows(mysql_query("SELECT * FROM co_rel_subj WHERE co_subj_co = '$courseId'"));

$outArr['subjectsNum'] = $subjectsNum;
echo json_encode($outArr);

Instead of showing the HTML piece structured, this is what $newCourseStructure results:

{"newCourseId":"243","newCourseName":"a","newCourseAbbrev":"ae","newCourseTypeId":"1","newCourseTypeName":"M\u00e1ster","isMultisubjectValue":"1","subjectList":"
Edici\u00f3n y Acabado de Imagen Digital<\/div>
","subjectsNum":1}

Answer 1

Your JSON string is not valid JSON because you don't use quotes around the string values. Instead of manually creating JSON, create an array or object and then json_encode() it.

You don't apper to output the JSON string. Use echo or print .

Add dataType : 'json' to your ajax request so that jQuery will parse the JSON, returning the native JavaScript object. All of the variables you use in the success function are undefined . After parsing the JSON you should use

var courseId = newCourse.newCourseId; // and so on

Your ajax request doesn't have a type and so will default to GET. add type : 'POST' if you want to use POST.

Answer 2

Try $_GET['co_subj_co']; instead of POST .

As long as you don't specify the method to jQuery's ajax call, it's made by GET, not POST.

Answer 3

Are you actually using POST, or are you firing off a GET request (your browser's developer tools should tell you this easily). You should also make sure that $courseId is an integer by $courseId = intval($_POST['co_cubj_co']); . In addition, you should add a condition for the event that the requested ID is not found.

Answer 4

As MueR suggests, the reason to make sure that courseID is an integer is to prevent SQL injection (unless you want people to do things like delete your entire DB at will). This, of course, assumes that courseID is something like an autoincrement int.

However, you've got a number of other problems. Your JSON is invalid since you're ostensibly writing out unquoted strings... you should just use json_encode:

$outArr = array();
$outArr['newCourseId'] = $result_co['co_id'];
$outArr['newCourseName'] = $result_co['co_name'];
...
echo json_encode($outArr);

Personally, I prefer to just use $_REQUEST, which concatenates both $_POST and $_GET. Makes it easier.

Answer 5

I have annotated two things in the code:

$.ajax({
    type : 'POST', 
    dataType: "json", 
    url:'config/forms/course_conf/course_generator.php',
    data:{
        co_subj_co:editedCourseId
    }})
    .done(function(newCourse){
        var courseId = newCourse.newCourseId;
        var newcourseName = newCourse.newCourseName;
        var isMultisubjectValue = newCourse.isMultisubjectValue;
        var subjectsNum = newCourse.subjectsNum;
        var newCourseAbbrev = newCourse.newCourseAbbrev;
        var newCourseTypeId = newCourse.newCourseTypeId;
        var newCourseTypeName = newCourse.newCourseTypeName;
        var newCourseStructure = '<div class="tableRow dynamicRow noHeight injectedRow"'
        + ' data-isMultisubjectValue="' + isMultisubjectValue + '"'
        + ' data-subjectsNum="' + subjectsNum + '"'
        + ' data-id="' + courseId + '"'
        + ' id="' + courseId + '"'
        + ' data-abbrev="' + newCourseAbbrev + '"'
        + ' data-courseTypeId="' + newCourseTypeId + '"'
        + ' title="' + newCourseName + '">'
        + '<div class="contentColumn40"><span class="tableContentText">'
        + newCourseName + ' (' + newCourseTypeName + ')</span></div>'
        // WHERE IS subjectList DEFINED?
        + '<div class="contentColumn40">' + subjectList 
        + '</div>'
        + '<div class="contentColumn10"><div class="tableIconLink">'
        + '<a href="#"><div class="editIcon" data-id="' + courseId + '"'
        + ' title="Editar ' + newCourseName + '"></div>'
        + '</a></div></div><div class="contentColumn10"><div class="tableIconLink">'
        + '<a href="#"><div data-id="'+courseId+'" class="discontinueIcon" '
        + 'title="Discontinuar '+newCourseName+'"></div></a></div></div></div>';
    /*
     * your HTML is generated, but you never put it in the DOM
     */
    $('#idOutputWrapper').empty().html(newCourseStructure);
}

When you use subjectList from the json response, please notice that it comes with a closing </div> tag for some reason, maybe you should change that, too.

btw: Your code formatting is horrible, sorry to say so. You can compress your js before uploading it to the server, but while working on it, it NEEDS to be readable. I just edited it to fit better in the codeblock here.