常連

ajaxでデータをポストしているのですが
クロームのデベロッパツールで送信している値をみることができますか？

$.ajax({
  url: '/test/' ,
  dataType: 'json',
  type: 'post',
data: {'id':  id}

このような実装です

chrome ajaxリクエストPOSTデータを見る方法

### 実現したいこと
POSTされたinput[type="text"]がdisabled状態であるか、空であるかを区別し、処理を分岐したいと思っています。

editアクションで使用をしたく、以下の仕様を考えています。
- DBに値がセットされていればtextをdisabled属性にする
- ユーザーは値を上書きする時はdisabledを解除し、別の値の入力または入力値を空にする操作ができる
- submitされupdateアクションが実行されたとき、disabledなら更新しない、空文字なら値をNULLに上書きする

### 環境
Laravel：6.x
PHP：7.ｘ
サーバー：Apache 2.4.x / Amazon Linux 2

### 発生している問題
試したところ生PHPではdisabledの場合null、空の場合は空文字('')となり区別が可能でしたが、Laravelでは全てnullになってしまうようです。調べましたらConvertEmptyStringsToNullが働いているためらしいとわかり、Kernel.phpでコメントアウトしました。ところが今度は全て空文字になってしまい、やはり区別ができません。
生PHPではできるけれど、Laravelでは不可能なのでしょうか？それとも設定変更などで可能でしょうか？

### 該当のソースコード
edit.blade.php
```PHP
<form method="post">
  @foreach ( $user as $key => $column )
    {{ Form::text($key, $column, isset($column) ? ['disabled' => null] : null }}
  @endforeach
  <button type="submit">送信</button>
</form>
```
UserController.php
```PHP
public function edit($id)
{
  return view('edit', [$user => User::find($id)->toArray()]);
  //以下の値が入っていると仮定します。
  // $user['column1'] = '1234';
  // $user['column2'] = null;
}
public function update(Request $request, $id)
{
  dump($request->all());
  // array:2 [
  //   "column1" => ""
  //   "column2" => ""
  // ]
}
```

### 生PHPの場合
```PHP
<?php
echo 'EMPTY:<br>';
var_dump($_POST['empty']);
echo '<br>';
echo 'DISABLED:<br>';
var_dump($_POST['disabled']);
echo '<br>';
// EMPTY:
// string(0) ""
// DISABLED:
// NULL
?>
<form method="post">
<input type="text" name="empty">
<input type="text" name="disabled" value="1234567890" disabled>
	<input type="submit">
</form>
```

Laravel フォーム内のテキストボックスがdisabledか空か区別したい

HTTPのPOSTメソッドでリクエストを投げる際にURLエンコードする必要性はあるのでしょうか。
URLエンコードというのは、もともとヘッダ部のURL部分に2バイト文字や制御文字と紛らわしい文字が入るのを防止するためのものであり、
BODY部には不要ではないかと思いました。

例えばMIME TYPEにapplication/x-www-form-urlencodedが指定されている場合文字列はエンコードして送信されますが、
application/jsonを指定する場合などは、手動でURLエンコーディングするべきでしょうか？

HTTPのPOSTメソッドにおいてリクエストボディをURLエンコードする必要性はあるのでしょうか？

htmlのstartボタンを押したら今の現在地の緯度と経度をデータベースに保存するようにしたいです。
保存後にそのページと別のページにリダイレクトしたいと考えています。
しかし、うまくいかないので教えてください。

```routes.rb
"hoge/:id" => "hoge#start"
```
```html.slim
input type="button" value="start" onclick="hogehoge(#{@hoge.id})"
```
```hoge.js
function hogehoge(x) {
  if (navigator.geolocation) {
    //現在地取得可能
    navigator.geolocation.getCurrentPosition(
      function(position) {//success
        var data = position.coords;
        var lat = data.latitude;
        var lng = data.longitude;
        $.post({
          url: "/hoge/"+x,
          data: {latitude: lat, longitude: lng},
          dataType: 'json',
          success: function(){
            alert("success")
          },
          error: function(){
            console.log("error")
            console.log(response)
          }
        });
      },
      function() {//error
        var errorInfo = [
        "原因不明のエラーが発生しました…。" ,
        "位置情報の取得が許可されませんでした…。" ,
        "電波状況などで位置情報が取得できませんでした…。" ,
        "位置情報の取得に時間がかかり過ぎてタイムアウトしました…。"
         ];
        var errorNo = error.code;
        var errorMessage = "[エラー番号: " + errorNo + "]\n" + errorInfo[ errorNo ] ;
        alert( errorMessage ) ;
      },
      {
        "enableHighAccuracy": true,
        "timeout":10000
      }
    );
  } else {
    //現在地取得不可能
    alert("お使いの端末は現在地が取得出来ません。")
  }
}
```
```hoge_controller.rb
def start
    @hoge = Hoge.find_by(id: params[:id])
    @hoge.longitude = params[:longitude]
    @hoge.latitude = params[:latitude]
    if @hoge.save
      flash[:notice] = "#{@hoge.longitude}#{@hoge.latitude}"
      redirect_to 'hoge/index'
    end
end
```

Ajaxでpostした後に別のページに遷移したい

実現したいことは以下のサイトのブロードキャストメッセージを送るの部分です。
[Messaging APIリファレンス](https://developers.line.biz/ja/reference/messaging-api/#send-multicast-message)

他サイトを参考に以下のようなコードを作成しました。
```C#
            // To creat HttpClient
            var client = new HttpClient();

            // Accesstoken
            var accessToken = "token";

            // URL
            var url = "https://api.line.me/v2/bot/message/multicast";

            // Message
            var json = "{ \"type\" : text, \"text\" : \"Hello World\"  }";
            // var content = new StringContent("{ \"your\": \"content\", \"maybe\": \"json\" }");
            // content.Headers.Add("X-SOME-RANDOM", "header-value");

            var request = new HttpRequestMessage(HttpMethod.Get, url);
            // Request Header
            request.Headers.Add("ContentType", "application/json");
            request.Headers.Add("Authorization", "Bearer " + accessToken);
            // Request Body
            request.Headers.Add("to", "userId");
            request.Headers.Add("messages", json);
            var response = await client.SendAsync(request);
```

これを実行するとインターナルサーバーエラーになります。
リクエストヘッダーを設定する箇所は以下のサイトを参考にしました。
[HttpClient でリクエストヘッダを設定する](https://qiita.com/c-yan/items/6e506399675e3cc56732)


リクエストヘッダーをそのまま、リクエストボディに適用した形です。
これだとよろしくないのでしょうか。

追記⓵
リクエストヘッダーとボディを分けるところは完成しましたが、どのようにして
ヘッダーにAuthorizationを設定すればよいでしょうか。現在のコードは以下です。

```C#
            var json = @"{""type"":""text"", ""text"":Hello World}";
            var content = new StringContent(json, Encoding.UTF8, @"application/json");

            using (var client = new HttpClient())
            {
                var response = await client.PostAsync($"http://foo.example.com", content);
            }
```

追記⓶
現在のコードは以下です。ボディとヘッダーを同時に設定できました。
```C#
            // To creat HttpClient
            var client = new HttpClient();

            // Accesstoken
            var accessToken = "token";

            // URL
            var url = "https://api.line.me/v2/bot/message/broadcast";

 
            var request = new HttpRequestMessage(HttpMethod.Post, url);
            // Request Header
            request.Headers.Add("Authorization", "Bearer " + accessToken);
            var parameters = new Dictionary<string, string>()
            {
                { "messages", "Hello World" },
            };

            request.Content = new StringContent(
                parameters.ToString(),
                Encoding.UTF8,
                "application/json"
            );

            await client.SendAsync(request);//ここでデバックで停止
```

デバック結果
![イメージ説明](a9298d00b78930b2d35317add26b5d17.png)

値も指定通りになっている気がします。
特にサーバーエラー等は出ていません。

追記⓷
現在、ローカルホストを外部に公開するためにngrokを使用しています。そこでは200Okのレスポンスが返ってきます。
が、fiddlerではエラーになっているようです。
以下がその画面と、現在のコードです。
![イメージ説明](5acf9948e2eb6689d5ef14f13ff76da9.png)

```現在のコード
            // To creat HttpClient
            var client = new HttpClient();

            // Accesstoken
            var accessToken = "token=";

            // URL
            var url = "https://api.line.me/v2/bot/message/broadcast";

            // POST
            var request = new HttpRequestMessage(HttpMethod.Post, url);

            // Request Header
            request.Headers.Add("Authorization", "Bearer " + accessToken);

            var str1 = new Dictionary<string, string>();
            str1.Add("type", "text");
            str1.Add("text", "test test test");

            var str2 = new Dictionary<string, Dictionary<string, string>>();
            str2.Add("messages", str1);

            var json = JsonConvert.SerializeObject(str2);

            request.Content = new StringContent(
                json.ToString(),
                Encoding.UTF8,
                "application/json"
            );

            await client.SendAsync(request);
```

追記④
現在POSTでブロードキャストメッセージを送ると以下のようにFiddlerに表示されます。
```ここに言語を入力
POST https://api.line.me/v2/bot/message/broadcast HTTP/1.1
Authorization: Bearer my token
Content-Type: application/json; charset=utf-8
Host: api.line.me
Content-Length: 52
Expect: 100-continue
Connection: Keep-Alive

{"messages":{"type":"text","text":"test test test"}}
```

レスポンスは400(Bad request)になっています。
見た感じだと、APIリファレンスの要求に沿っている気がするのですが、どこかおかしいい箇所がありますでしょうか。

ちなにみに以下が現在成功している、マルチメッセージのFiddlerの結果です。比べても大きな違いはない気がします。
また、マルチメッセージはテンプレートの既存メソッドを指定しています。

```ここに言語を入力
POST https://api.line.me/v2/bot/message/multicast HTTP/1.1
Authorization: Bearer my token
Content-Type: application/json; charset=utf-8
Host: api.line.me
Content-Length: 143
Expect: 100-continue
Connection: Keep-Alive

{"to":["ID1","ID2"],"messages":[{"type":"text","text":"マルチメッセージ"}]}
```

C#でリクエストヘッダーとボディを一緒に送信する

### 実現したいこと
例えば、WEB内の”リンク”文字をクリックすると新規タブでyahooを表示。
その後、今日の天気にフォーカスを当てる(今日の天気が画面上に見える)ようなことは可能でしょうか？
今日の天気のclass；
<ul class="_3FCSgIyrLJIkYgN7bq6-R">



aタグの中にリンク先のclassを指定すればいいのでしょうか？

### 該当のソースコード
```HTML
<a class="link" href="https://www.yahoo.co.jp/"　
　target="_blank" rel="noopener noreferrer">リンク</a>
```




リンク後のHTML要素にフォーカスを当てたい

VBAにてHTTPでPOST送信を実施しAPIに繋ぐプログラムを作成していますが、
GETのURL送信とは違ってボディ部分に記載しないといけないと、調べて知りました。

その際にVBA上でボディに記載し、レスポンスを受けとる方法の記事が
調べても見つけれない状況で、詰まっております。
VBAでやること自体が自由度が落ちると思いますが、実装できるようでしたら
ご教授していただけると助かります。

調べながら組んでみたプログラムを載せていますので、
使い方が違うなどもあれば、ご教授いただきたいと思っております。

```ここに言語を入力
Public Function test()

Dim url
　　url = "https://webapi/api"

Dim JsonObject As Object
　Set JsonObject = New Dictionary
　　JsonObject.Add "product", "～～"
　　JsonObject.Add "contract", "～～"

Dim apikey As String
Dim apitoken As String
　　apikey = "～～～"
　　apitoken = "～～～"

Dim objhttp As Object
　　Set objhttp = CreateObject("MSXML2.XMLHTTP")
　With objhttp
  　.Open "POST", url, False
  　.setRequestHeader "Content-Type", "application/x-www-form-urlencoded"
  　.setRequestHeader "Content-Type", "application/json"
  　.setRequestHeader "Content-Type", "charset=UTF-8"
  　.setRequestHeader "Authorization", "Bearer " & apitoken               
  　.setRequestHeader "x-api-key", apikey
  　.send JsonConverter.ConvertToJson(JsonObject)
　　　Debug.Print 
　End With

End Function
```

VBAでAPIのPOST送信を実施したいがVBAでのボディに記載して送信方法がわかりません。

[参考サイト](https://tokkan.net/spring/jsp2.html)
上記のサイトを参考に、検索画面を作るための項目を作成しているのですが、以下のようなエラーが出てしまいました。まだ経験が浅く、色々と調べてみましたが、どのように修正すればいいのかわかりません。

![イメージ説明](ffcfc1d848b53aec6b2641e22ae523b2.png)

POSTがサポートされていないとのことですが、POSTを使うために何か設定が必要なのでしょうか？

エディター上では特にエラーは起きていません。
別画面に渡そうとするとエラーになってしまいます。

###やりたいこと
各項目で入力した内容を別画面(searchConfirm.jsp)で表示させたい。

### TestController.java
```ここに言語を入力
package group.study.dev.sample.test;

import java.util.LinkedHashMap;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

@Controller
public class TestController {

	@ModelAttribute("UM")
	public SearchModel init() {
		SearchModel um = new SearchModel();
		um.setTxt("test");
		um.setRdo1("r1");
		um.setRdo2("B");

		return um;
	}

	public void setMap(Model model) {
		LinkedHashMap<String, String> map = new LinkedHashMap<>();
		map.put("A", "その１");
		map.put("B", "その２");
		model.addAttribute("map", map);
	}

	@RequestMapping(value = "/login", method = RequestMethod.GET)
	public String loginGet(Model model) {
		init();
		setMap(model);
		return "login";
	}

	@RequestMapping(value = "/searchConfirm", method = RequestMethod.POST)
	public String loginPost(@ModelAttribute("UM") SearchModel searchModel, Model model,
			RedirectAttributes redirectAttributes) {

		System.out.println(searchModel.toString());

		setMap(model);
		/*
		System.out.println("modelに登録されているオブジェクトを全て表示");
		for (Map.Entry<String, Object> e : model.asMap().entrySet()) {
			System.out.println(e);
		}
		*/
		return "searchConfirm";
	}
}
```

### SearchModel.java
```ここに言語を入力
package group.study.dev.sample.test;

public class SearchModel {

	private String txt;
	private String area;
	private String sel1;
	private String sel2;
	private boolean chk1;
	private String[] chk2;
	private String rdo1;
	private String rdo2;
	private String pass;
	private String hdn;

	public String toString() {
		StringBuilder stb = new StringBuilder();

		stb.append("txt:" + txt + System.lineSeparator());
		stb.append("area:" + area + System.lineSeparator());
		stb.append("sel1:" + sel1 + System.lineSeparator());
		stb.append("sel2:" + sel2 + System.lineSeparator());
		stb.append("chk1:" + chk1 + System.lineSeparator());
		if(chk2 == null) {
			System.out.println("NULLです。");
		}else {
			stb.append("chk2:" + chk2.length + System.lineSeparator());
		}
		//stb.append("chk2:" + chk2.length + System.lineSeparator());
		stb.append("rdo1:" + rdo1 + System.lineSeparator());
		stb.append("rdo2:" + rdo2 + System.lineSeparator());
		stb.append("pass:" + pass + System.lineSeparator());
		stb.append("hdn:" + hdn + System.lineSeparator());

		return stb.toString();
	}

	public String getTxt() {
		return txt;
	}

	public void setTxt(String txt) {
		this.txt = txt;
	}

	public String getArea() {
		return area;
	}

	public void setArea(String area) {
		this.area = area;
	}

	public String getSel1() {
		return sel1;
	}

	public void setSel1(String sel1) {
		this.sel1 = sel1;
	}

	public String getSel2() {
		return sel2;
	}

	public void setSel2(String sel2) {
		this.sel2 = sel2;
	}

	public String[] getChk2() {
		return chk2;
	}

	public void setChk2(String[] chk2) {
		this.chk2 = chk2;
	}

	public String getRdo1() {
		return rdo1;
	}

	public void setRdo1(String rdo1) {
		this.rdo1 = rdo1;
	}

	public String getPass() {
		return pass;
	}

	public void setPass(String pass) {
		this.pass = pass;
	}

	public String getHdn() {
		return hdn;
	}

	public void setHdn(String hdn) {
		this.hdn = hdn;
	}

	public boolean isChk1() {
		return chk1;
	}

	public void setChk1(boolean chk1) {
		this.chk1 = chk1;
	}

	public String getRdo2() {
		return rdo2;
	}

	public void setRdo2(String rdo2) {
		this.rdo2 = rdo2;
	}

}


```
### login.jsp
```ここに言語を入力
<%@page import="group.study.dev.sample.test.SearchModel"%>
<%@page import="group.study.dev.sample.test.TestController"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<title>ログイン</title>

<script type="text/javascript">
	//テキスト読み込み時に実行
	document.addEventListener("DOMContentLoaded", function() {

		// form:select で複数選択した場合、選択されなかったため手動で選択。
		// ※Modelで配列、リストにすればできた。「form:selectの追記」を参照
		var ary = [];

<%
	SearchModel model = (SearchModel) request.getAttribute("UM");
	if (model != null && model.getSel2() != null) {
		String[] strs = model.getSel2().split(",");
		for (String str : strs) {
			out.println("ary.push('" + str + "');");
		}
	}
%>

		var obj = document.getElementById("sel2");

		for (var i = 0; i < obj.length; i++) {
			if (ary.indexOf(obj.options[i].value) >= 0) {
				obj.options[i].selected = true;
			}
		}
	}, false);
</script>
</head>
<body>
	<spring:url value="/login" var="url" htmlEscape="true" />
	<form:form action="${url}" method="POST" modelAttribute="UM">

		<form:input path="txt" />
		<hr />
		<form:textarea path="area" />
		<hr />
		<form:select path="sel1" items="${map}" />
		<hr />
		<form:select path="sel2" multiple="true">
			<form:option value="op1">オプション</form:option>
			<form:options items="${map}" />
		</form:select>
		<hr />
		<form:checkbox path="chk1" label="チェック" />
		<hr />
		<form:checkboxes path="chk2" items="${map}" />
		<hr />
		<form:radiobutton path="rdo1" label="ラジオ１" value="r1" />
		<form:radiobutton path="rdo1" label="ラジオ２" value="r2" />
		<hr />
		<form:radiobuttons path="rdo2" items="${map}" />
		<hr />
		<form:password path="pass" />
		<hr />
		<form:hidden path="hdn" />
		<BR />
		<input type="submit" value="テスト" />
		<BR />
		<BR />
	</form:form>
</body>
</html>
```
### searchConfirm.jsp
```ここに言語を入力
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>searchConfirm</title>
</head>
<body>
	<h1>検索結果</h1>
	<c:out value="${txt}"/>

</body>
</html>
```

よろしくお願い致します。