Question

我想删除空格和加号，现在我正在调整"Individual House"，我想通过AJAX将此值传递给下一页，还有一些额外的东西：

searchProperties?propertyType=%5B%22的 Individual +的 House %22%2C%22的 Row +的 House %22%5D

我想传递这样的AJAX数据网址：

searchProperties?propertyType="["Individual House","Row House"]"

function createJSON() {
  property_type = [];
  $('#property_type:checked').each(function () {
    //property_type.push($(this).val());
    property_type.push(jQuery.trim($(this).val().replace(/\s+/g, ' '))); // ["Individual+House","Row+House"]

  });
  var property_typejson = JSON.stringify(property_type),
      data = {};

  if(property_type != '')
    data['propertyType'] = property_typejson;

  console.log(data);

  $.ajax({
    type: 'GET',	  
    url: "map.php",
    data: data,
    success: function (data) {
      console.log(data);
    },
    error: function (errMsg) {
      console.log(errMsg);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<input type="checkbox" id="property_type" name="property_type[]"
       value="Individual House" /> Individual House
<input type="checkbox" id="property_type" name="property_type[]"
       value="Row House" /> Row House
<input type="checkbox" id="property_type" name="property_type[]"
       value="Villa" /> Villa

<br></br>

<button type="button" onClick="createJSON()">
  <i class="fa fa-search"></i>Update search
</button>

Answer 1

我已经大大改变了这一点：

为您的按钮添加了一个ID，在其上设置了一个点击监听器，将您的GET更改为POST请求，将您的数据更改为合法的JSON，并编写了一些PHP以在另一端读取该JSON。 / p>

另外，我已将您的功能重命名为submitAjax()，因为这对我来说更符合逻辑。

＆＃13;

	$(document).ready(function () {
		$(document).on("click", "#btnSubmitJson", function (e) {
			e.preventDefault(); // don't submit the form normally, we'll handle that with jQuery
			submitAjax();
		});
	});

	function submitAjax() {
		var property_type = [];

		$(".property_type:checked").each(function () {
			property_type.push($(this).val()); // You don't need trim, your values don't start or end with a space, replacing \s with ' ' literally does nothing given your values
		});

		var jsonData = {
			property_type : property_type
		};

		jsonData.another_var = "something else"; //add more stuff to the object


		console.log("jsonData :", jsonData ); // you can console.log out more than one thing, I like to include a label so I know what I'm looking at

		$.ajax({
			type: "POST", 
			url: "map.php",
			data: jsonData,
			success: function (data) {
				console.log("success: ", data);
			},
			error: function (errMsg) {
				console.log("error: ", errMsg);
			}
		});
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<input type="checkbox" class="property_type" name="property_type[]"
       value="Individual House" /> Individual House
<input type="checkbox" class="property_type" name="property_type[]"
       value="Row House" /> Row House
<input type="checkbox" class="property_type" name="property_type[]"
       value="Villa" /> Villa

<br></br>

<button type="button" id="btnSubmitJson">
  <i class="fa fa-search"></i>Update search
</button>

＆＃13;

PHP：

$submittedJson = $_POST['jsonData'];

print_r($submittedJson);

Answer 2

HTML：html对象中的ID必须是唯一的，所以我更新了你的html：

               <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
                <!-- your ids should be -->
                <input type="checkbox" id="IndividualHouse" name="property_type[]"
                       value="Individual House" /> Individual House
                <input type="checkbox" id="RowHouse" name="property_type[]"
                       value="Row House" /> Row House
                <input type="checkbox" id="Villa" name="property_type[]"
                       value="Villa" /> Villa

                <br></br>

                <button type="button"  id="btnUpdateSearch">
                    <i class="fa fa-search"></i>Update search
                </button>

然后简化了JavaScript以利用ID。

                    $(function ($) {
                        $("#btnUpdateSearch").click(function () {
                            $chk = $("input:checked");
                            var arr = [];
                            $chk.each(function () { arr.push(this.id); })

                            var data = { 'propertyType': JSON.stringify(arr) };

                            $.ajax({
                                type: 'GET',
                                url: "map.php",
                                data: data,
                                success: function (data) {
                                    console.log(data);
                                },
                                error: function (errMsg) {
                                    console.log(errMsg);
                                }
                            });
                        });

                    });

                </script>

如何使用jquery删除此代码的空间和加号

2 个答案: