文章要約ウェブプログラムを書いてみた。html編

https://jump1268.hatenablog.com/entry/2018/12/29/164839jump1268.hatenablog.com

前回の続きです。

検索要約君というウェブページ名です

入力欄

<form  id="my-form">
<p>検索ワード1：<br>
<input type="text" name="name1" size="30"></p>

<p>検索ワード２：<br>
<input type="text" name="name2" size="30"></p>

<p>検索ワード３：<br>
<input type="text" name="name3" size="30" ></p>

<p><input type="button" value="検索する" id="submit"></p>
</form>

これで下のような入力欄を作ることができます。

f:id:jump1268:20190102192603p:plain

sizeで一応最大文字数を指定します。

_____________________________________________________________________________________________________________

検索ボタンを押したときの処理

<script type="text/javascript">
$("#submit").click(function(){
    var val1 = $('#my-form [name=name1]').val();
    console.log(val1);
    var val2 = $('#my-form [name=name2]').val();
    console.log(val2);
    var val3 = $('#my-form [name=name3]').val();
    console.log(val3);
    event.preventDefault();

//送る文字列定義
    var kei = val1 +","+ val2 +","+ val3;
    console.log(kei);

name1の文字をval1に、name2の文字をval2に。。。という風に格納します。
その後それを連結して、keiという変数に代入します。

_____________________________________________________________________________________________________________

POST通信の処理

<script type="text/javascript">

    var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    $.ajax({
      type: "POST",
      url: $SCRIPT_ROOT + "/predict/",
      data:$('form').serialize() ,

      success: function(data){
        $('#result').text(' 推測結果: '+data);
      },
      error: function(data){
         $('#result').text('データ不足です');
      }
    });
});

重要なところは

url: $SCRIPT_ROOT + "/predict/",
data:$('form').serialize() ,
ここですね。
predict/に入力欄で入力されたデータを送信します。
name1=○○&name2=○○&name3=○○
こんな感じで送信します。

全体のプログラムです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>検索要約君</title>
</head>
<body>

<form  id="my-form">
<p>検索ワード1：<br>
<input type="text" name="name1" size="30"></p>

<p>検索ワード２：<br>
<input type="text" name="name2" size="30"></p>

<p>検索ワード３：<br>
<input type="text" name="name3" size="30" ></p>

<p><input type="button" value="検索する" id="submit"></p>
</form>
<div >
  <h1 id="result" style="margin-right:20px; margin-top:1px;float:left;"><span> </span></h1>
</div>
<script type="text/javascript" src="../static/jquery-3.3.1.min1.js"></script>

<script type="text/javascript">
$("#submit").click(function(){
    var val1 = $('#my-form [name=name1]').val();
    console.log(val1);
    var val2 = $('#my-form [name=name2]').val();
    console.log(val2);
    var val3 = $('#my-form [name=name3]').val();
    console.log(val3);
    event.preventDefault();

//送る文字列定義
    var kei = val1 +","+ val2 +","+ val3;
    console.log(kei);
    var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    $.ajax({
      type: "POST",
      url: $SCRIPT_ROOT + "/predict/",
      data:$('form').serialize() ,

      success: function(data){
        $('#result').text(' 推測結果: '+data);
      },
      error: function(data){
         $('#result').text('データ不足です');
      }
    });
});




</script>

</body>
</html>