web-dev-qa-db-ja.com

HTML Webページ全体をAjax応答で置き換える方法は？

特定の質問に行く前に、いくつかの基本的な手順を説明する必要があります。

まず、問題のアプリケーションは、顧客によるオンラインでの予定の管理を扱います。

美容センターのトリートメントをフォームに記入し、情報を提供した後、お客様は確認ページにアクセスします。

次に、このページはajaxリクエストを実行して、予定をデータベースに保存します。

すべてが成功すると、成功メッセージのある予定の詳細を含むページが表示されます。

問題は、ページが現在応答でのみ、つまりタブネットワークコンソールのブラウザーでのみ表示されることです。

だから私の質問は簡単です：How can I replace the entire structure of the html page with actual one shown in the response?

StackOverflowでもウェブ上で多くの質問を見つけました。ただし、これはすべて、divへの追加に制限されています。ハングアップする必要はありませんが、<html>、htmlページを書き換える方法。私はこれを行う方法がわからないので、あなたからのアドバイスが必要です。

完全を期すために、これは私にajax応答htmlに戻るコードです。

       $.ajax({
          'type': 'POST',
          'url': 'backend_api/ajax_save_appointment',
          'data': postData,
          'success': function(response)
           {
               console.log(response);
           },
           'error': function(jqXHR, textStatus, errorThrown)
           {
               console.log('Error on saving appointment:', jqXHR, textStatus, errorThrown);    
           }
       });
javascriptphpjqueryhtmlajax
11
Dillinger

応答に_<head>_および_<body>_タグが含まれている場合：

$("html").html(response);。

そうでない場合、それが唯一のコンテンツである場合は、次のようにします。

$("body").html(response);。

22
L Ja

応答がhtmlコンテンツの場合は、次のコード行を使用できます。

...
'success': function(response)
       {
           $("body").html(response);
       }
...

更新：

これはhtmlタグを置き換えるのが難しいでしょうが、あなたができること：

...
'success': function(response)
       {
           $("html").html($("html", response).html());
       }
...

jqueryで応答を解析し、htmlのコンテンツを取得して、現在のhtmlのコンテンツを置き換えます

7
Fribu - Smart Solutions

この質問はすでにここで扱われています： HTMLページをAJAX経由で取得したコンテンツで置き換えます

基本的に、あなたは試すことができます（私の悪いこれはIEで動作していません）：

document.open();
document.write(newContent);
document.close();

または、jqueryを使用しているため

$("body").html(data);

よろしく

2
AdZaf

おそらく、 'success'関数で次のコードを使用して、別のルートにリダイレクトできます。 window.location.href = ' http：//Host.local/path/to/appointment-details ';

0
Artist Unknown

コメントを残す十分な担当者がいない（!!）が、@ fribu-smart-solutions（ https://stackoverflow.com/a/33914275/1428972 ）によるUPDATE回答は以下を使用して、正しいものとしてマークされます：

$("html").html($("html", response).html());

これは、ajaxを介してページを完全に置き換えます。他の人が"html"は完全には機能しません。

私はこれが古い投稿であることを知っていますが、同じ問題に関する私の問題を解決しました！ :)

0
Steve Weatherill

@JudgeProhetこの目的にはAJAXリクエストは必要ないようです。このようにしてもメリットはありません。ページ全体が更新された場合、通常のHTTPで実行できますリクエスト。AJAXを使用する場合は、JavaScriptを使用して、予定の詳細を含む新しいページにリダイレクトできます。

$.ajax({
   'type': 'POST',
   'url': '/backend/ajax_save_appointment',
   'data': postData,
   'success': function(response)
   {
      console.log(response);
      // redirect browser to new location
      window.location.href = '/backend/appointment_details';
   },
   'error': function(xhr, status, error)
   {
      console.log('Error on saving appointment:', xhr, status, error);
      // display error message to the user
   }
});
0
Artist Unknown