AjaxでのJSONデータの送信

お世話になってます。
htmlファイルから取得したデータをJSON形式でサーバーに転送し、
JSONデータを確認した処、以下のようなデータになり困っています。
ajaxで転送するデータを例えば、{"name","Nitta"}というように記載し
転送した場合、req.body.nameのデータはきちんと"Nitta"と表示されるので
ajaxでの送信方法に問題ないと考えます。

お分かりの方居られましたら、ご教示下さい。

●aaa.ejs(html)側

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル</title>

<!--Bootstrap assets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script>

function data_List(){

var data={};
var element = document.getElementById("new_listing");
data.new_listing = element.value ;

var element2 = document.form1.product;
data.product = element2.value;

var element3 = document.form1.price_range;
data.price_range = element3.value; 

var element4 = document.form1.price_min;
data.price_min = element4.value; 

var element5 = document.form1.price_max;
data.price_max = element5.value;

return JSON.stringify(data);

}

var Auto_buy_start = function (){

var obj = data_List();

alert(obj);

$.ajax({
  async: false,
  url: 'http://localhost:8888/buy_start',
  type: 'post',
  data: obj,
  dataType: 'json'
  }).done(function(res){
     console.debug(res);
  }).fail(function(xhr, status, error){
     alert(status);
});

}

</script>
<!--自作CSS -->
<style type="text/css">
#container{ margin:60px; }
<!--
/*ここに調整CSS記述*/
-->

table th{ padding: 10px;}
table td{ padding: 3px 10px;}

</style>
</head>

<body>
<div class="container">
    <div class="page-header" style="background-color:#99FFFF">
	<h1>Mercari 自動購入ツール</h1>
	<p class="lead">検索項目にチェックや記入をお願いします。</p>
    </div>
    <form name="form1" id="form1" >
    <div class="form-group">
	<label>
	　<i class="glyphicon glyphicon-th-list"></i>
	　<span>出品順といいね!順</span>
	</label>
	<div class="select-wrap" data-search="parent" style="width:20%">
	  <select id="new_listing" name="category_root" class="select-default">
	     <option data-root-id="1">出品の新しい順</option>
	　　 <option data-root-id="2">いいね!多い順</option>
	  </select>
	</div>
    </div>
    <div class="form-group search-extend-brand">
	<label>
	　<i class="glyphicon glyphicon-tree-conifer"></i>
	　<span>商品名</span>
	</label>
	</br>
	<i class="icon-arrow-bottom"></i>
	<input type="text" name="product" value placeholder="例) ひのひかり" class="input-default" data-search="brand" style="width:30%">
    </div>
    
    <div class="form-group search-price">
	<label>
	　<i class="glyphicon glyphicon-jpy"></i>
	　<span>価格</span>
	</label>
	<div class="select-wrap">
	  <select name="price_range" class="select-default" data-search="price">
	     <option value>選択ください!</option>
	     <option value="300-1000" >300 ～ 1000</option>
	　　 <option value="1000-5000" >1000 ～ 5000</option>
	     <option value="5000-10000" >5000 ～ 10000</option>
	     <option value="10000-30000" >10000 ～ 30000</option>
	     <option value="30000-5000" >30000 ～ 50000</option>
	     <option value="50000" >50000 ～ </option>
	  </select>
	</div>
	<input type="number" name="price_min" value placeholder="最低価格" class="input-default" data-search="price-min" style="width:30%">
	<span>～</span>
	<input type="number" name="price_max" value placeholder="最高価格" class="input-default" data-search="price-max" style="width:30%">
    </div>   
　　</form>
</div>
<div>
      <input type="reset" class="btn btn-primary" value="リセット">
      <input type="button" class="btn btn-success" onclick="Auto_buy_start()" value="自動購入開始">
      <input type="button" class="btn btn-warning" value="自動購入終了"onclick="Auto_buy_end()">
</div>
<!-- /container -->
</body>
</html>

●Test.js(Node.js側)

var http = require('http');
var fs = require('fs');
var ejs = require('ejs');
var express = require('express');
var bodyParser = require('bodyParser');
var app = express();

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(function(req, res, next){
	res.header("Access-Control-Allow-Origin","*");
	res.header("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");
	next();
});
app.set("view engine","ejs");
app.get('/',function (req, res){
   var getdata=[];
   var id_num=[];
   var List_data = require('./node_modules/Sample_G/Sample2');
   res.render('./aaaa.ejs', {Listdata:  List_data} );
});

app.post("/buy_start", function (req, res) {
  var rejson = JSON.stringify(req.body);
  //↓↓↓↓↓↓↓ここで取得
  console.log(rejson);
  res.send(rejson);
});

app.listen(8888);

●取得したJSONデータ

{"{\"new_listing\":\"出品の新しい順\",\"product\":\"\",\"price_range\":\"\",\"price_min\":\"\",\"price_max\":\"\"}}

行動規範の内容に同意します

回答1件

ベストアンサー

テキストで取得したJSONをテキストのまま送ってしまっているのでは。
JSONで取得するか、テキストからJSONに変換してから送ってみては

投稿2019/08/21 03:59

mikkame

総合スコア5036

Nitta

2019/08/21 04:15

返信ありがとうございます。 var obj = data_List(); var obj2 = JSON.parse(obj); ajax側を中略 data: obj2, 中略で、結果きっちり行けました。ありがとうございました。結果: {"new_listing":"出品の新しい順","product":"ひのひかり","price_range":"5000～10000","price_min":"4000","price_max":"120000"}

行動規範の内容に同意します