如何删除空格，并加上此代码使用jquery

Question

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

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

---

我想通过AJAX数据URL是这样的：

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', \t 
 
    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请求est，将您的数据更改为合法的JSON，并写了一些PHP来读取另一端的JSON。

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

\t $(document).ready(function() { 
 
\t \t $(document).on("click", "#btnSubmitJson", function (e) { 
 
\t \t \t e.preventDefault(); // don't submit the form normally, we'll handle that with jQuery 
 
\t \t \t submitAjax(); 
 
\t \t }); 
 
\t }); 
 

 
\t function submitAjax() { 
 
\t \t var property_type = []; 
 

 
\t \t $(".property_type:checked").each(function() { 
 
\t \t \t 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 
 
\t \t }); 
 

 
\t \t var jsonData = { 
 
\t \t \t property_type : property_type 
 
\t \t }; 
 

 
\t \t jsonData.another_var = "something else"; //add more stuff to the object 
 

 

 
\t \t 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 
 

 
\t \t $.ajax({ 
 
\t \t \t type: "POST", 
 
\t \t \t url: "map.php", 
 
\t \t \t data: jsonData, 
 
\t \t \t success: function (data) { 
 
\t \t \t \t console.log("success: ", data); 
 
\t \t \t }, 
 
\t \t \t error: function (errMsg) { 
 
\t \t \t \t console.log("error: ", errMsg); 
 
\t \t \t } 
 
\t \t }); 
 
\t }

<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>

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>