ホームページ > ウェブフロントエンド > jsチュートリアル > jquery ajaxでフォームデータをjsp_jqueryに送信する方法

jquery ajaxでフォームデータをjsp_jqueryに送信する方法

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

AJAX はますます人気が高まっており、WEB プログラム開発者としてそのように感じていないと遅れをとることになり、求人に応募する際に何度も落選される可能性もあります。私も WEB プログラムの開発者です。もちろん、「流れに乗る」必要があります。そうしないと、仕事は保証されません。

以前は、AJAX は Javascript スクリプトを 1 つずつ使用して実装されており、非常に面倒でした。 Jquery を学習すると、AJAX の実装はそれほど難しくないと感じます。もちろん、Jquery フレームワーク以外にも優れたフレームワークはあります。ここでは、より一般的な Jquery に焦点を当てます。 Jquery AJAX でフォームを送信するには 2 つの方法があります。1 つは URL パラメーターを介してデータを送信する方法で、もう 1 つはフォームを送信する方法です (通常どおり、フォーム フォームの値はバックグラウンドで取得できます)。提出するフォームに要素が多い場合は、2番目の方法で提出することをお勧めします。 もちろん、「タイピングスキル」を練習したい場合は、1番目の方法で提出するのも悪くありません。開発者は自分たちの努力を無駄にしたくないと思います。

Ajax テクノロジーは優れたユーザー エクスペリエンスをもたらすと同時に、jquery を使用することで開発を簡素化し、作業効率を向上させることができます。

以下は、一般的な開発手順の紹介です。

この記事では、jquery-1.3.2.min.js 開発ツールを使用します。

2 つの新しいページを作成します:

1. show.jsp: ajax を呼び出して、フォーム内のデータを ajax.jsp ページに送信します。

2. ajax.jsp: show.jsp ページによって渡されたフォーム データを取得し、結果を返します。

2 つのページのエンコード形式は GBK に設定する必要があります:

<%@ page contentType="text/html;charset=GBK"%>
ログイン後にコピー

show.jsp ページの重要な部分:

1. jquery-1.3.2.min.js への参照を追加します。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
ログイン後にコピー

2. ajax メソッドを呼び出すときに使用されるフォームの ID を設定します。

<form id="ajaxFrm" >
ログイン後にコピー

3. ajax.jsp ページによって返された結果を表示するための div を設定します

<div id="ajaxDiv"></div>
ログイン後にコピー

4. ajax を呼び出すボタンを追加します

<input type="button" onClick="doFind();" value="调用一下ajax" >
ログイン後にコピー

5. ajax を呼び出す関数を追加します:

function doFind(){

$.ajax({

cache: false,

type: "POST",

url:"ajax.jsp", //把表单数据发送到ajax.jsp

data:$('#ajaxFrm').serialize(), //要发送的是ajaxFrm表单中的数据

async: false,

error: function(request) {

alert("发送请求失败!");

},

success: function(data) {

$("#ajaxDiv").html(data); //将返回的结果显示到ajaxDiv中

}

});

}
ログイン後にコピー

ajax.jsp ページのソースコード:

<%@ page contentType="text/html;charset=GBK"%>

<%

String userName = request.getParameter("UserName");

if(userName!=null){

userName = new String(userName.getBytes("ISO-8859-1"), "utf-8");//解决乱码的问题

}

String returnString = "";

returnString="你好," + userName;

out.print(returnString);

%>
ログイン後にコピー

操作効果は次のとおりです:

jquery ajaxでフォームデータをjsp_jqueryに送信する方法

jquery ajaxでフォームデータをjsp_jqueryに送信する方法

jquery ajax 送信フォームはアクションから jsp に値を渡します

jsp ページ:

コードは次のとおりです:

var clientTel = $("#clientTel").val(); 
var activityId = $("#activityId").val(); 
$.ajax({ 
type : "post",//发送方式 
url : "/arweb/reserve/saveCode.action",// 路径 
data : "clientTel="+clientTel+"&activityId="+activityId , 
success: function(text){$("#randomCode").val(text);}, 
error: function(text) {alert("对不起,用户ID不存在,请输入正确的用户ID");} 
}); 
ログイン後にコピー

アクションクラス:

コードは次のとおりです:

HttpServletResponse res = ServletActionContext.getResponse(); 
res.reset(); 
res.setContentType("text/html;charset=utf-8"); 
PrintWriter pw = res.getWriter(); 
pw.print(random); 
pw.flush(); 
pw.close(); 
ログイン後にコピー

pw.print(random); ここでのランダムは、アクションが jsp に渡したい値です。jsp では、success: function(text) のテキストは、アクションから渡された値を受け取ります。

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