ajax_javascript スキルを使用して部分的なページジャンプと結果を返す方法を実装する方法-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 15:43:13

オリジナル

1207 人が閲覧しました

コードサンプルの分析を通じて、部分的なページジャンプと結果の戻りを実装するための 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 が部分的なページジャンプと結果を返す方法を紹介するこの記事の全内容です。気に入っていただければ幸いです。