« Ajax機能 | トップページ | クロスドメイン呼び出し »

2007年4月30日 (月)

パラメータ指定

パラメータを指定してAjaxの呼び出しをする場合、一番シンプルな方法は、URLの後ろに文字列としてパラメータを指定する方法である。

dojo.io.bind({
  url: "http://ymdmstk.cocolog-nifty.com/sample?param1=aa&param2=bb",
  load: function(type, data, evt) { alert(data);}
});

contentパラメータにオブジェクトを指定することで、パラメータを指定することもできる。この場合、空白や日本語などの文字列を自動的にURL Encodeしてくれる。

dojo.io.bind({
  url: "http://ymdmstk.cocolog-nifty.com/sample",
  content: {
    param1: "aa",
    param2: "bb"
  },
  load: function(type, data, evt) { alert(data);}
});

HTTPメソッド

デフォルトではGETによりパラメータを送信している。POSTでパラメータを送信したいときは、methodパラメータで"post"を指定する。methodには、postかgetを指定できる。

dojo.io.bind({
  url: "http://ymdmstk.cocolog-nifty.com/sample",
  method: "post",
  content: {
    param1: "aa",
    param2: "bb"
  },
  load: function(type, data, evt) { alert(data);}
});

フォーム

formNodeパラメータの値としてHTML FormのDOMノードを指定することで、フォームに入力したの値をパラメータとして送ることができる。

<html>
<head>
<title>dojo.io.bind</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
  <script type="text/javascript" src="dojo.js"></script>
  <script type="text/javascript">
dojo.require("dojo.io.*");

function doit() {
  dojo.io.bind({
    url: "sample.xml",
    mimetype: "text/xml",
    method: "post",
    formNode: dojo.byId("sampleform"),
    load: function(type, data, evt) {
      alert(data);
    }
  });
}
</script>
</head>

<body>
  <form id="sampleform">
    <input type="text" name="param1"><br />
    <input type="radio" name="param2" value="1a" checked="checked">1a
    <input type="radio" name="param2" value="2a">2a
    <input type="radio" name="param2" value="3a">3a<br />
    <input type="text" name="param3"><br />
  </form>
  <input type="button" value="Get sample.txt" onclick="doit();">
</body>
</html>

dojo.io.FormBind

フォームに入力した値をAjax呼び出し時に用いるときは、dojo.io.bind()ではなく、dojo.io.FormBind()を使うことができる。formのmethod, actionパラメータの値、formのsubmitボタンをそのままAjax呼び出しにおいても利用できる。

<html>
<head>
<title>dojo.io.bind</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
  <script type="text/javascript" src="dojo.js"></script>
  <script type="text/javascript">
dojo.require("dojo.io.*");

function doit() {
  var x = new dojo.io.FormBind({
    formNode: dojo.byId("sampleform"),
    mimetype: "text/xml",
    load: function(type, data, evt) {
      alert(data);
    }
  });
  x.onSubmit = function(form) {
    dojo.byId("output").innerHTML = "Loading...";
    return true; 
  }
}
dojo.addOnLoad(doit);
</script>
</head>

<body>
  <div id="output"></div>
  <form method="post" action="sample.xml" id="sampleform">
    <input type="text" name="param1"><br />
    <input type="radio" name="param2" value="1a" checked="checked">1a
    <input type="radio" name="param2" value="2a">2a
    <input type="radio" name="param2" value="3a">3a<br />
    <input type="text" name="param3"><br />
    <input type="submit" value="Get sample.txt">
  </form>
</body>
</html>

« Ajax機能 | トップページ | クロスドメイン呼び出し »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/6257370

この記事へのトラックバック一覧です: パラメータ指定:

« Ajax機能 | トップページ | クロスドメイン呼び出し »