web-dev-qa-db-ja.com

JavaScriptからPHP using AJAX

JavaScriptからPHP jQuery/AJAXを使用して）にいくつかの値を渡したいのですが、次の「簡略化された」コードがありますが、何が間違っているのかわかりません。 StackOverflowでも同様の質問/回答ですが、どれも実際には役に立ちません。

HTML：

<div>
<a href="#" id="text-id">Send text</a>
<textarea id="source1" name="source1" rows="5" cols="20"></textarea>
<textarea id="source2" name="source2" rows="5" cols="20"></textarea>
</div>

ジャバスクリプト：

$("#text-id").click(function() {
$.ajax({
type: 'post',
url: 'text.php',
data: {source1: "some text", source2: "some text 2"}
});
});

PHP（text.php）：

<?php 

$src1= $_POST['source1'];  
$src2= $_POST['source2'];     

echo $src1; 
echo $src2;

?>

問題：何も起こっていない...エラーなし..何もない。 PHP echoステートメントに「source1」と「source2」の値が表示されません。

javascriptphpjqueryajax
10
Gandalf

AJAX呼び出しに 成功ハンドラ を含める必要があります：

$("#text-id").on( 'click', function () {
    $.ajax({
        type: 'post',
        url: 'text.php',
        data: {
            source1: "some text",
            source2: "some text 2"
        },
        success: function( data ) {
            console.log( data );
        }
    });
});

そしてあなたのコンソールでは、あなたは受け取るでしょう：

some textsome text 2

両方のtest.phpとhtmlソースファイルは同じディレクトリにあります。

10
hjpotter92
$("#text-id").click(function(e) {// because #text-id is an anchor tag so stop its default behaivour
e.preventDefault();
$.ajax({
type: "POST",// see also here
url: 'text.php',// and this path will be proper
data: {
       source1: "some text",
       source2: "some text 2"}
}).done(function( msg )
      {
       alert( "Data Saved: " + msg );// see alert is come or not
     });
});

参照ajax

1
Rituraj ratan