1

まず、私はAJAXを初めて使用します。これは、PHPでAJAXを使用する最初の試みです。私が遭遇した問題は、XMLHttpRequestの状態が正常に4に変更されたにもかかわらず、つまりcompleteであるにもかかわらず、responseTextと他のすべての応答タイプが ""（空）であるということです。

私は自分のコードの本当に単純なバージョンを試しましたが、最近W3Schools AJAX＆PHPの例http://www.w3schools.com/ajax/ajax_aspphp.aspのコピーを試しましたが、これも何も返しませんでした。これは、構成の問題である可能性があると私に信じさせますが、ここからどこに行くべきかわかりませんか？誰か提案はありますか？

これは、AJAXPHPCommsに適用される私のjsのセクションです。

$("#submitButton").click(function() {
    alert("The button has been clicked")
    if(($("#title").val().length < 3 ) || ($("#description").val().length < 3 ))
    {
        alert("Title and Description must be 3 characters or more!");
    }
    else
    {
            var ajaxRequest;

            try{
                // Opera 8.0+, Firefox, Safari
                ajaxRequest = new XMLHttpRequest();
            } catch (e){
                // Internet Explorer Browsers
                alert("THE PROBLEM WAS IE " + e);
                try{
                    ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    alert("THE PROBLEM WAS second " + e);
                    try{
                        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e){
                        // Something went wrong
                        alert("Your browser broke!");
                        return false;
                    }
                }
            }   

            // receive data sent from the server
            ajaxRequest.onreadystatechange = function(){
                if(ajaxRequest.readyState == 4){
                    // Get the data from the server's response
                    var test = ajaxRequest.responseText; 
                    alert(test);
                    //console.log(xmlHttp);
                    console.log(ajaxRequest);
                }
            }

            //Variables
            var title =$("#title").val();
            var description =$("#description").val();
            var url = $("#url").val();

            ajaxRequest.open('GET','http://localhost/TestPHP/Model/AddNewVideo.php');
            try {
                ajaxRequest.send();
            }
            catch(e) {
                alert("THE PROBLEM WAS " + e);
            }   
    }
});

これが私のPHPコードです。PHPは、SQLクエリが機能することを確認するために単独でテストされていませんが、「helloworld」をエコーするように縮小しただけでは機能しません。

    <?PHP
header('Access-Control-Allow-Origin: *');
//Connect to dBase
include("mysql_connect.php");
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    echo 'POSTed Method';
  }
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
    echo 'GET Method';
  }


//Debugging
ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);

//Gather Variables
echo $title = mysql_real_escape_string($_GET["TITLE"]);
$description = mysql_real_escape_string($_GET["DESCRIPTION"]);
$url = mysql_real_escape_string($_GET["URL"]);

//Insert new query
mysql_query('INSERT INTO video VALUES($title, $description, $url') or die(mysql_error());


//Close the DBase
mysql_close($connect);

echo $description;
?>

私のアップデートとJQueryを使用したjsの拡張バージョン。

$("#submitButton").click(function(event) {
        alert("The button has been clicked")
        if(($("#title").val().length < 3 ) || ($("#description").val().length < 3 ))
    {
        alert("Title and Description must be 3 characters or more!");
    }
    else
    {
            // Variables to pass
            var $form = $("#AddVideoForm"),
            // Gather all fields 
            $inputs = $form.find("input, select, button, textarea"),
            // serialize the data in the form
            serializedData = $form.serialize();


            try
            {
                //JQuery Based AJAX HTTP Request
                $.ajax({
                    url: "http://localhost/TestPHP/Model/AddNewVideo.php",
                    type: "POST",
                    data: serializedData,
                    success: function(response, textStatus, jqXHR){
                    // Show success
                    alert("Wonderful It worked");
                    console.log("Hooray, it worked!");
                    },
                    // callback handler that will be called on error
                    error: function(jqXHR, textStatus, errorThrown){
                    // log the error to the console
                    console.log("The following error occured: "+ textStatus, errorThrown)
                    },
                    complete: function(){
                    // Display Completed message
                    alert("Totally Completed!  Hoorah!");
                    }
                });
            } 
            catch (e)
            {
                alert("THE PROBLEM WAS " + e);
            }
            event.preventDefault();
    }
});'
4

1 に答える 1

0

コメントでいくつかの交換の後：答え：

$("#submitButton").click(function(event) {
    /* ajax request here */
    event.preventDefault();
});

これは、ブラウザがアンカーまたは送信ボタンをクリックしたときに通常の動作を実行しようとするためです（クリックされた要素はわかりません）。PreventDefault（）は、通常の実行を停止するためにあります。

注意すべきことが1つあります。AjaxリクエストにはjQueryを使用してください。ajaxリクエストを実行するための上記のすべてのコードロジックは、jQueryフレームワークですでに実行されており、20行以上のコードからほんの数行に変更できます。

于 2012-07-10T22:01:32.540 に答える