jQuery POST送信後のページ更新

前へ 次へ
このQ&Aのポイント
  • jQueryを使用してPHPにPOST送信し、戻り値でページを遷移または更新する方法について教えてください。
  • index.php内で次のようなコードを使用してPOST送信を行っています。
  • アラートを表示した後にページを遷移させたいのですが、location.hrefやlocation.reloadではうまくいきません。何か別の方法はありますか？
回答を見る
  • ベストアンサー

jQuery POST送信後のページ更新

いつもお世話になっております。 jQuery+PHPにて、POST送信し、 戻り値の条件分岐でページを遷移させたり、 更新させたいと思っています。 ご教授願えないでしょうか。 index.php内 [ソース] $.POST('./search.php', {'code':12345'}, function(data){ if(data['type'] == '1'){ alert('見つかりません') location.href='./index.php'; } else if(data['type'] == '2'){ location.href='./edit.php; }, 'json' ); 見つかりませんのアラートを表示した後、 location.hrefだと、リロードする事なく。 またlocation.reloadにしても同様です。 $.POST外でlocation.reloadを指定すると リロードしてくれるのですが、$,POST送信してくれません。 もし不可能であれば、location.hrefで別のファイルを経由させて実施しようと思っています。 宜しくお願いします。

  • prr4e
  • お礼率48% (66/136)
  • AJAX
  • 回答数3
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.2

こんにちは。 出来ないというのは、私が試したスクリプトが動いていないということでしょうか？ それとも動きが違うから出来ないということでしょうか。 >jQuery+PHPにて、POST送信し、 >戻り値の条件分岐でページを遷移させたり、 >更新させたいと思っています。 という仕様であれば先のサンプルで出来ているはずです。 更新の部分が補足で頂いたlist形式で・・・の部分を更新するのであれば、現在どのようなスクリプトで動いているか提示して頂かないとわかりません。 ※一応、作ったサンプルは動作確認しています。

prr4e
質問者

お礼

大変失礼しました。 初歩的なミスでした。 結果的には仰っている通りですが、 私がlocationの後にreturnを記述していなかったため、 後続の処理を実行してしまった事が原因でした。 すみませんでした。

その他の回答 (2)

回答No.3

スクリプトエラーは出てますか？ }が１つ足りなくて、function(data){ が閉じられていないようですが、 これはBBS投稿時のコピーミスでしょうか？ index.phpからindex.phpにページジャンプしているようですが、更新が早すぎてlocation.hrefが変わっているけど気づけない、というパターンはありませんか？ たとえば、location.href="./404.php"などとして、file not foundが表示されるか確認することで、最低限のスクリプトが動いているかどうかの確認できます。

prr4e
質問者

お礼

回答が遅くなって申し訳ありません。 ごめんなさい、投稿時のコピーミスです。 スクリプトエラーは出て折らず、chromの要素の検証でも 問題ないです。 有難うございます。

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 以下のスクリプトでおそらく望んでいるだろう動作が確認できたのですがいかがでしょうか。 ・ページ読み込み後に「読み込み完了」とアラートが上がる ・1を選択して送信すると「見つかりません」のアラートが上がった後にlocation.reload()を実行する ・「読み込み完了」ともう一度アラートが上がることで更新されていることを確認 ・2を選択して送信するとlocation.hrefが実行され指定ページに遷移する ・3を選択した場合は何も起こらない (postしている内容はvalの値でpost先ではその値をJSONにして返しているだけ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery POST送信後のページ更新</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript"> $().ready ( function() { alert ( '読み込み完了' ); $('#frm-test button').click ( function() { $.post ( 'q7257966_1.php', $('#frm-test').serialize(), function ( data ) { if ( data.type == '1' ) { alert ( '見つかりません' ); location.reload(); } else if ( data.type == '2' ) { location.href = 'q7257966_3.php'; } }, 'json' ); }); }); </script> <style type="text/css"> </style> </head> <body> <form id="frm-test"> <select name="val"> <option value="1">1の場合</option> <option value="2">2の場合</option> <option value="3">3の場合</option> </select> <button type="button">送信</button> </form> </body> </html>

prr4e
質問者

補足

ご回答有難う御座います。 記述してくださった条件は試した上で、 質問をさせて頂きました。 やはりできなかったです。 補足が足りなかったのですが、 上記のページは、Ajaxでページロード時に listを値を取得して表示する形式です。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. AJAX

関連するQ&A

  • jQueryでGETだと送信できるデータがPOSTだと送信できません。

    jQueryでGETだと送信できるデータがPOSTだと送信できません。 jQueryをつかって文字列をPHPに送信したいのですが、GETでは送信できるのにPOSTだと送信ができません。 js -------------------- $.ajax({ type:"POST", //GETだと送信できます。 url:"hoge.php", data:{data:"hoge"}, success:function(data,status){ alert(data); } }); -------------------- php -------------------- <?php $_POST[data] //GETの場合、$_GET[data] == "hoge"。 echo $data; ?> -------------------- 問題点がわかりましたらご指摘いただければと思います。

  • ajaxでPHPにPOST送信して結果データを受信しようとしていますがうまくいきません。

    セレクトボックスの値を受け取りPOST送信 <HTML側> function SelValue(){ var x = $('#category1').val(); $.ajax({ type: "POST", url: "category.php", data: {"prm":x}, dataType: "json", success: function(data, status){ alert(data.address1 + data.address2); }, error: function(XMLHttpRequest, status, errorThrown){ alert("エラーが発生しました！"); } }); } 以下category.php if(!$_POST) header("Location: input.php"); $CATEGORY2 = array( 1 =>array( 1 => "a", 2 => "b", 3 => "c", ), 2 => array( 1 => "d", 2 => "e", 3 => "f", ), 3 => array( 1 => "g", 2 => "h", 3 => "i", ), ); $ary = array(); if($_POST["prm"]){ for($i=1;$i<=3;$i++){ foreach($CATEGORY2[$i] as $key => $value){ if($key == $_POST["prm"]) $ary = $CATEGORY2[$i]; } } } json_encode($ary); としています。 PHPにPOSTしたデータも確認できないし jsonデータを表示できないです。 どのようにしたらいいかわかりません。 ajax初心者でわからないことだらけです。 教えてください。

    • ベストアンサー
    • AJAX
  • jQuery $.ajax JSON形式のPOST

    jQuery $.ajax JSON形式のPOSTでフォーム内容を送信し、送信先のPHPでメール送信させるプログラムをかいているのですが、どうしても$.ajaxのerrorが呼び出される状況です。errorが呼び出されますが、PHPの方のメール送信はできております。 PHP側の出力がうまくいっていないのではないかと思いますが、原因がわかりません。どなたかご教授いただけないでしょうか？宜しくお願いします。 ---js--- $("#send").click(function(){ var NAME = $('#name').val(); var EMAIL = $('#email').val(); var TITLE = $('#titlel').val(); var COMMENT = $('#comment').val(); $.ajax({ url : "sendmail.php", dataType : "json", data : {name:NAME, email:EMAIL, title:TITLE, comment:COMMENT}, type : "post", success : function(data){ if(data != ''){ alert(data.result); } }, error : function(){ alert("通信に失敗しました。"); } }); }); ---sendmail.php--- if($_SERVER["REQUEST_METHOD"] != "POST"){ header("HTTP/1.0 404 Not Found"); return; }else{ //メール送信処理　（省略） $message = "送信完了メッセージ"; $result = array('result' => $message); echo json_encode($result); }

  • １回だけリロードしたい

    開いたときに１度だけリロードさせたいのですが、たのページを参考に <script language="javascript"> <!-- if ( location.search.indexOf("1") == -1 ) { setTimeout("_reload()",1000); } function _reload() { location.href = location.href + "?1"; } //--> </script> を入れてみたのですが、リロードはされるものの、いわゆるブラウザの「更新」ボタンとは違うらしく、POSTで送られてきたデータを破棄した状態でリロードされるため、データの取得ができず困っています。 データを保持したままのリロード、つまりブラウザの「更新」ボタンのようなリロードを１度だけさせるにはどうしたらよいか教えてください。

  • XDomainRequestによるPOST送信

    こんばんは。 クロスドメインかつIEに対応するためにXDomainRequestを使っているのですが、POST送信する方法で詰まっています。 サーバ側のPHPファイルに対してPOSTでデータを送信したいのですが、サーバ側では受信できていません。 （↑php側でログを残すことで、受信できていないことを確認しています） データ送信の形式はXMLHｔｔｐRequestと同じように、send(key=value)としていますが間違っているでしょうか。 私なりに調べてみましたが、send(null)としているサイトが多くパラメータを送信しているのが見つからなかったため、こちらで質問させて頂きました。 宜しくお願いします。 クライアント側のコードは、 if(window.XDomainRequest){ var xdr = new XDomainRequest(); xdr.onload = function(){ alert(xdr.responseText); } xdr.open("post", "サーバ側PHPファイル"); xdr.send("key=value"); //ここでデータ送信 } サーバ側PHPファイルは、 header("Access-Control-Allow-Origin:*"); header("Access-Control-Allow-Headers:Content-Type"); if($_POST['value']){ $result = "RESULT:".$_POST['value']; echo "'$result'"; }

  • jqueryでAJAX非同期通信をしてphpからメールを送信する。送信

    jqueryでAJAX非同期通信をしてphpからメールを送信する。送信完了後にlightbox風に「送信しました」と表示させたい。 sendmail.phpにpostでフォームの内容が渡りません。どうやってsendmail.phpに値を渡して sendmail.phpの$msgを戻して、表示させるのでしょうか？ 素人です。1週間ほど調べましたが、これが限界でした。 宜しくお願いします。 index.php <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("#exeBtn").click(function() { $.ajax({ url : "sendmail.php", type : "post", data : ({ message: $('#message').val(),{off:$('#exeBtn').val()}), datatype:'json', success: function( dispMsg(){ if('<?=$msg?>' != ''){ alert('<?=$msg?>'); } }}, }); }); }); //]]> </script> </head> <body> <form> <input id="message" type="hidden" name="message" value="EntryTitle"/> <input id="exeBtn" type="button" name="off" value="リンク切れ" /> </form> </body> </html> sendmail.php <?php header(’Content-Type: text/xml; charset=UTF-8′); $off=$_POST["off"]; $body = stripslashes($_POST['message']); if ($off != ""){ $to = "hogehoge@hogehoge.co.jp"; $subject = "報告"; $subject=mb_convert_encoding($subject,"JIS","utf-8"); $body=mb_convert_encoding($body,"JIS","utf-8"); $ret = mb_send_mail($to,$subject,$body); if($ret){ $msg = '送信しました'; }else{ $msg = '送信失敗しました'; } } } ?>

    • ベストアンサー
    • AJAX
  • jqueryの$.ajaxで送信できない

    はじめまして。 jquery初心者ですが、$.ajax使ってのPOST送信ができません、php側でログを取ってみてもアクセスすらしません。若干お手上げなので、分かる方がいたら、アドバイスを頂けませんか？ 【やりたいこと】 formにデータを入力(html)し　→　jqueryを使ってpost送信(js)　→　認証(php)　→　結果をhtmlに表示させたい。 【ソース】 -a.html- <form method="post" id="signin" action=""> <input id="email" name="email" value="" title="email" class="required" tabindex="4" type="text"> <input id="posturl" type="hidden" name="posturl" value="a.php"> <input id="signin_submit" value="Sign in" tabindex="6" type="submit"> </form> -------- -a.js- $(function() { $("form#signin").submit(function() { var email = $("input#email").val(); var postFile = $("input#posturl").val(); var data = {email:email}; $.ajax({ type: "POST", url: postFile, data: data, timeout: 1000, error: function(){ // エラー時 alert('Error'); }, success: function(data) { if(data != ''){ alert(data.result); } else { alert('no data'); } } }); }); }); -------- -a.php- (他略、とりあえず適当に出力してみる) echo "{'status': false,}"; exit; -------- よろしくお願いします。ｍ＿ｍ

  • Ajax・jQueryでGETとPOSTする方法

    画像をクリックしたときにjQuery,Ajaxを利用してGET/POSTをしたいです。 POSTとGETは良く使うので今回両方の流れを知りたいと思います。 PHPではPOST、GETは使うことができます。javascript,jQueryはちょっと触ったことのある程度です。 フォームに値を入力してjQueryとAjaxでPOSTでデータを送るのは下記ホームページを参考にしてみたら成功しました。 http://webcake.no003.info/webdesign/jquery-ajax-php-post-sample.html 今回は下記のような複数のパラメータを送信したいと思います。 画像Aをクリックした時にkeyword=aaaa,cate=1 画像Bをクリックした時にkeyword=bbbb,cate=2 画像Cをクリックした時にkeyword=cccc,cate=3 今までPHPでGETを使っていた時のHTML部分です↓ <a href="index.php?keyword=aaaa&cate=1"><img src="images/a.jpg"></a> <a href="index.php?keyword=bbbb&cate=2"><img src="images/b.jpg"></a> <a href="index.php?keyword=cccc&cate=3"><img src="images/c.jpg"></a> 「send.phpファイル」 <?php //POSTでデータが送られた場合 echo $_POST['keyword'].'<br>'; echo $_POST['cate'].'<br>'; //GETでデータが送られた場合 echo $_GET['keyword'].'<br>'; echo $_GET['cate'].'<br>'; ?> ==GET================================================================ （HTML部分） <a href="index.php?keyword=aaaa&cate=1"><img src="images/a.jpg"></a> の記載方法だと、クリックしたときにアドレスバーにアドレスが入力されるのでページが切り替わってしまいAjaxにならないので違う形にする必要があると思いますがどのようにkeyword,cateのパラメータを持たせればよいのでしょうか？ または、この形のままで良く、リンクした時にページが飛ばないような処理方法があるのでしょうか？（またはAjaxではあまりGETは使わないのでしょうか？） 上記に記載した、POSTの参考例のソースを記載します。 GETの場合にどのように変えたらよいのでしょうか。 $(document).ready(function() { var data = {request : $('#request').val()};//GETで複数値対応に書き換えが必要。 $.ajax({ type: "GET", url: "send.php", data: data, success: function(data, dataType) { $( '#test' ) . html( data ); },error: function(XMLHttpRequest, textStatus, errorThrown) { this; alert('Error : ' + errorThrown); } }); }); ==POST================================================================ （HTML部分） formを使う形になると思いますが、どのような書き方が良いのか教えて下さい。 画像を使うと下記のようになるとは思いますが、A,B,Cそれぞれにkeyword,cateの情報をどのように持たせておいたらよいのかがわかりません。 <form> <button type="submit" name="" value="*****"><img src="sample.gif"></button> </form> （jQuery部分） $(document).ready(function() { var data = {request : $('#request').val()};//POSTで複数値対応に書き換えが必要。 $.ajax({ type: "POST", url: "send.php", data: data, success: function(data, dataType) { $( '#test' ) . html( data ); },error: function(XMLHttpRequest, textStatus, errorThrown) { this; alert('Error : ' + errorThrown); } }); }); 以上、よろしくお願い致します。

    • ベストアンサー
    • AJAX
  • jquery PHP 値　ajax

    失礼します。現在jqueryで作成した２次元配列をPHP側に渡したいのですが上手くいきません。 jquery側のコンソールで確認した際にはsuccessの処理が行われ配列の中身がjson形式で表示されるのですが、その内容をPHP側で確認しようとするとNULLが返ってきてしまいます。 何卒ご教授よろしくお願いいたします。 html側 $(function(){ // 送るデータ形式はJSONでなければ、PHP側でエラーが出る.のでJSON.stringify()でJSON形式に変換 send_data= JSON.stringify(data); // 送信処理 $.ajax({ url: "ajax.php", // 送信先のPHP type: "POST", // POSTで送る contentType: "Content-Type: application/json; charset=UTF-8", //必須ではなさそうだが、サーバ側との整合のために明示しておいた方がよい。 // dataType: 'json', //受信形式 必須ではなさそうだがサーバ側との整合のために明示しておいた方がよい。 data:send_data //JSON形式の送信データ }).success(function(data, status, xhr) { // 通信成功時の処理 console.log("success"); console.log("data ="+data); console.log("status ="+status); console.log("xhr ="+xhr); }).error(function(xhr, status, error) { // 通信失敗時の処理 console.log("error"); }).complete(function(xhr, status) { // 通信完了時の処理 console.log("fin"); }); }) }) PHP側 二通り試してみました。 <?php //php://inputはPOSTの生データを取得できる $json = file_get_contents("php://input"); //JSON形式データをPHPの配列型に変換 $data = json_decode($json); var_dump($data) ; //POSTできたデータを格納 $hoge = $_POST['data']; var_dump($hoge);

    • ベストアンサー
    • AJAX
  • $POSTの送信

    POSTデータを送信する方法を教えてください。 PHPのPOSTを用いたプログラミングを行っています。 以下のように、前ページ受信したPOSTの内容（「aaa」）を hiddenで送信したいと思いましたが 次ページ（result.php）にて「$name」と受信してしまいます。 （前略） <?php $name = $_POST['name']; echo $name; ?> <form action="result.php" method="POST"> <input type="hidden" name="name2" value=$name> <input type="radio" name="name3" value=" （以下略） 説明下手ではありますがご回答頂きたいと思います。 宜しくお願いします。

    • ベストアンサー
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する