PHP / Javascript - 通过POST将日期字符串传递给AJAX无法正常工作

I am creating a simple form that is to post data to a MySQL. Your thinking why POST and not GET? well there is a description field in this form that allows for many characters, and given that GET has its character limitations I opted to use POST.

Without further adieu, Here is my HTML form.

<form name="addExperienceForm" id="addExperienceForm" style="display:none;">
                    Title:<input type="text" name="title" id="title" />
                    From:<input type="text" name="startDate" id="startDate" />
                    To:<input type="text" name="endDate" id="endDate" />
                    Description:<textarea type="message" name="description" id="description"></textarea>
                    <input type="button" value="Submit" onclick="addUserExp()"/>
 </form>

here is the jQuery Datepicker code for the date boxes in the form:

//allow a date range to be selected
        $("#startDate").datepicker({
                    changeMonth : true,
                    changeYear : true,
                    dateFormat : "M,yy",
        })
        $("#endDate").datepicker({
                    changeMonth : true,
                    changeYear : true, 
                    dateFormat : "M,yy",
        })  

This is the AJAX function call:

function addUserExp(){
        var title = document.getElementById('title').value;
        var startDate = document.getElementById('startDate').value;
        var endDate = document.getElementById('endDate').value;
        var description = document.getElementById('description').value;
        var str = "title="+title+"start="+startDate+"end="+endDate+"desc="+description;
        var req = getXMLHTTP();

        if(req){

            req.onreadystatechange = function(){
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('addNewExp').innerHTML=req.responseText;    


                    } else {
                        alert("There was a problem while using XMLHTTP:
" + req.statusText);
                    }
                }
            }
        }
        req.open("post", "addExperience.php", true);
        req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        req.send(str);
    }

I suspect the problem is in the AJAX call, possibly something to do with my 'str' variable.

I haven't tested your code, but shouldn't str be:

 var str = "title="+title+"&start="+startDate+"&end="+endDate+"&desc="+description;

It would be much easier to use jQuery to handle AJAX requests:

function addUserExp(){
        var title = document.getElementById('title').value;
        var startDate = document.getElementById('startDate').value;
        var endDate = document.getElementById('endDate').value;
        var description = document.getElementById('description').value;
        $.post("addExperience.php", { "title": title, "start": startDate, "end": endDate, "desc":description })
        .done(function(data) {
            document.getElementById('addNewExp').innerHTML=data; 
        })
        .fail(function() { 
            alert("There was a problem with request."); 
        });         
    }

You can read more about $.post here.

After countless hours of reviewing my code, i finally realized that my PHP code was where the problem was.

BEFORE:

   <?php


$title = $_POST['title'];
$startDate = $_POST['startDate'];
$endDate = $_POST['endDate'];
$description = $_POST['desc'];

echo $title;
echo $startDate;
echo $endDate;
echo $description;

?>

and AFTER:

    <?php


$title = $_POST['title'];
$startDate = $_POST['start'];
$endDate = $_POST['end'];
$description = $_POST['desc'];

echo $title;
echo $startDate;
echo $endDate;
echo $description;

?>

Notice the $post variables were not reflecting my JS string.

thanks to all who assisted.