Ajax チュートリアルページの部分的なジャンプと結果の戻り-jsチュートリアル-php.cn

Ajax チュートリアルページの部分的なジャンプと結果の戻り

巴扎黑

リリース： 2017-08-21 10:23:43

オリジナル

1316 人が閲覧しました

コードサンプルの解析を通じて、部分ページジャンプと結果返却を実現する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?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フレームワークが使用されており、その効果は良好で実装が簡単ですが、問題はそれさえもであることです。ページが効果を達成した場合、ビジネスはフォームを送信する必要があります。この場合、送信をクリックした後でも、定義したゾーンは更新されます。この時点で、私が採用した解決策は単にフォームを送信するだけでは十分ではありません。 :

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

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 中国語 Web サイトの他の関連記事を参照してください。