ホームページ > ウェブフロントエンド > jsチュートリアル > ajax_javascript スキルを使用して部分的なページ ジャンプと結果を返す方法を実装する方法

ajax_javascript スキルを使用して部分的なページ ジャンプと結果を返す方法を実装する方法

WBOY
リリース: 2016-05-16 15:43:13
オリジナル
1197 人が閲覧しました

コードサンプルの分析を通じて、部分的なページジャンプと結果の戻りを実装するための ajax の実装を紹介します。具体的な内容は次のとおりです。

1. 結果を返す提出プロセス

これはデモ用の送信ボタンです。HTML コードは次のとおりです:

<input type="button" class="btn" value="提报" name="submit4" onClick="tibao();">
ログイン後にコピー

レポートボタンをクリックした後、ajax を介した処理のアクションにジャンプします。JavaScript コードは次のとおりです:

function tibao(){
var id='';
var URL = <select:link page="/smokeplan.do&#63;method=Tibao&idset="/>+id;
  $.ajax({url: URL, 
      type: 'GET',
      success: function(result) {
           alert(result);
        }
  });
}
ログイン後にコピー

アクションの処理が完了すると、返された結果が結果に配置され、プロンプト メッセージがページにポップアップ表示されます。もちろん、ここでのアクション ジャンプは XML で設定する必要があります。

バックグラウンド Java クラス処理プロセスは次のとおりです:

//提报
    public void Tibao(ActionMapping mapping, ActionForm form,
        HttpServletRequest request, HttpServletResponse response) throws Exception {
      String idset=request.getParameter("idset");
      CallHelper helper = initializeCallHelper("L_SmokeBoxtibaoWLDan", form,request, false);
      helper.setParam("bill_ids",idset);
      helper.setParam("personid",getPersonId(request));
      helper.execute();
      PrintWriter write = response.getWriter();
      write.print(helper.getOutput("message"));
      write.close();
    }
ログイン後にコピー

ここでは、SQL ステートメントを通じてデータが処理され、メッセージが返され、情報がページに出力されます。

ここで行われた操作の結果は、レスポンスに対応する位置に反映されるため、新たなストリームではなく、レスポンスに属するストリームが取得されます。

つまり、そこからジャンプすると、私の情報はそこに返されます。したがって、js では、result を使用して返された結果を受け取り、alert を使用してプロンプトを表示できます。

AJAX を使用してページジャンプを実現する方法

サンプルコードは次のとおりです:

プロジェクトでは、ajax を実装するために ajaxAnywhere フレームワークが使用されており、その効果は高く、実装も簡単です。しかし、問題は、この場合、ページで効果が得られたとしても、依然としてフォームを送信する必要があることです。 、送信をクリックした後でも、定義したゾーンは更新されません。現時点では、私が採用した解決策は次のとおりです。

強力な BS プロジェクト開発ツールである js を使用して、上記の問題を解決する関数をカスタマイズします。

function doGuahao()
{
 if(checkdata())
 {
 if(document.form1.result_flag.value=="0")
 {
  return false;
 }
 else
 {
  if(document.form1.checktype.value=="danganhao")
  {
  form1.action = "<%=formAction%>";
  form1.submit();
  }
  if(document.form1.checktype.value=="xingming")
  {
  form1.action = parent.left.url2;
  form1.submit();
  }
  if(document.form1.checktype.value=="shenfenzheng")
  {
  form1.action = "<%=formAction%>";
  form1.submit();
  }
 }
 } 
}
ログイン後にコピー

上記の内容は、ajax が部分的なページ ジャンプと結果を返す方法を紹介するこの記事の全内容です。気に入っていただければ幸いです。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート