ページを更新せずにPOSTを送信する

Webchatアプリを作成していますが、問題があります。ユーザーからのメッセージを投稿してデータベースに追加したいのですが、私のページを再読み込みしたくありません。「そのようなことをやったが、それが動作していません。ページを更新せずにPOSTを送信する

ファイルのindex.php：

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
setInterval(function() { 
     $("#chat-content").load('chat.php'); 
    },10); 

    $("#submit").click(function(){ 
     var clientmsg = $("#message").val(); 
     $.post("chat.php", {text: clientmsg}); 
     $("#message").attr("value", ""); 
     return false; 
    }); 
</script> 
</head> 
<body> 
<div id="chat-content"> 
</div> 
</body> 
<form method="post" id="messageform"> 
<input type="text" id="message" name="message"></input> 
<input id="submit" name="sumbit" type="submit" value="Send" /> 
</form>

ファイルchat.phpを：

<?php include('db.php'); 
$query = "SELECT * FROM `czat`;"; 
$result = $con->prepare($query); 
$result->execute(); 
$count = $result->fetchColumn(); 
if($count > 100){ 
    $query = "TRUNCATE `czat`;"; 
    $result = $con->prepare($query); 
    $result->execute(); 
} 

$query = "SELECT * FROM `czat` ORDER BY id ASC LIMIT 10;"; 
$result = $con->prepare($query); 
$result->execute(); 
while($row = $result->fetch()){ 
     echo $row["nazwa"].' - '.$row["tresc"].'<br>'; 
} 

if(isset($_POST['text'])){ 
    $text = $_POST['text']; 
    $query = "INSERT INTO `czat` (`id`, `nazwa`, `tresc`) VALUES (NULL, 'dd', '$text');"; 
    $result = $con->prepare($query); 
    $result->execute(); 
} 
?>

をdb.phpは、DBへの標準的な接続であります。

出典

2017-05-01 Kizbo

あなたの送信ボタンをフォーム内、ボタンのデフォルトの動作は、（この場合はフォームで定義されていないフォーム要素で定義された「アクション」属性にPOSTされているので、それが現在のページに掲載します）。あなたはjavascriptの

$("#submit").click(function(event){ 
     event.preventDefault(); 
     var clientmsg = $("#message").val(); 
     $.post("chat.php", {text: clientmsg}); 
     $("#message").attr("value", ""); 
     return false; 
    });

出典

2017-05-01 03:18:14

preventDefaultのアドバイスありがとうございますあなたが参照したい場合は、上記の投稿に私のコードを含めた – Kizbo

詳細を提供する必要がある場合。実際には、あなたのPHPは、POSTを受信した後に何も送信しません。それがうまくいかないとはどういう意味ですか？ Ajax経由で送信されるデータはありませんか？ Ajaxは送信しましたが、ページが更新されましたか？送信ボタンをクリックしてもメッセージは入力されたままですか？ –

私は、POSTが受信された後、このコード行を実行したいと思っています：https://pastebin.com/8phtaRk9 – Kizbo

ajaxを使用する必要があります。 Ajaxは非同期データ通信を提供します。

たとえば、クライアント側からサーバー側にデータ（POSTまたはGET）を送信できます。サーバー側のクライアント側から来たデータを使用し、その結果をクライアント側に返します。結果はhtmlまたはjsonである可能性があります。この決定は、あなたの選択に応じて変わる可能性があります。

これはサンプルajaxスクリプトです。

var messageText = $("#message").val(); 
messageText = messageText.trim(); 
$.ajax({ 
    url : "chat.php", 
    type: "POST", 
    data : {text : messageText} , 
    success: function(data, textStatus, jqXHR) { 
     console.log(data);// You can see the result which is created in chat.php 
    }, 
    error: function (jqXHR, textStatus, errorThrown) { 
     console.log(textStatus);// if there is an error 
    } 
});

出典

2017-05-01 01:44:28 mehfatitem

OPはすでにajaxを使っています... '$ .post'は' $ .ajax'の便利なメソッドです – charlietfl

しかし、私は彼がAjaxを使って知っているとは思わないのです。そのため、私はAjaxの構造を説明し、小さなAjaxスクリプトを与えました。 chat.phpでは、ビュー側を返すための結果がないためです。 – mehfatitem

私はあなたが言ったとおりにしましたが、結果はまだありません。機能のコードは次のようになります。https://pastebin.com/vk6g6U2W Ty with ajax :) – Kizbo

ためでpreventDefault（）に必要

はポストの成功ますか？（ステータス200 OK？）あなたは$のテキストを定義した後

echo $text;

を試してみましたか？あなたは価値を得ていますか？さあ、ちょうど1つのことをして助けに来て、問題を解剖して、何が間違っているかを見つけようとしないでください！

出典

2017-05-01 14:49:23

ページを更新せずにPOSTを送信する

答えて

関連する問題