Question

我正在尝试使用此控制台日志

$.post("greeting", { salutation: console.log(5 + 6), name: "Friend" },

致ajax param称呼但不起作用

我如何解决这个问题

<html>
  <head>
    <script src="javascripts/jquery-1.5.2.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $.post("greeting", { salutation: console.log(5 + 6), name: "Friend" },
          function(result) { $("#greeting").html(result);
        });
      });
    </script>
  </head>
  <body>
    <h1>Sinatra Ajax Demo using jQuery</h1>
    <div id="greeting">
      <p>Hello, World</p>
    </div>
  </body>
</html>

请帮帮我

我也使用sinatra ruby而不打印11

require 'sinatra'
require 'pp'

get '/' do
  erb :index
end

post '/greeting' do
  #puts "params"
  #pp params

  "<p>#{params[:salutation]}, #{params[:name]}</p>"
end

Answer 1

尝试这种方式：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="jquery-3.2.0.min.js">	</script>
  <script>
 $(document).ready(function(){
            var submitIcon = $('.searchbox-icon');
            var inputBox = $('.searchbox-input');
            var searchBox = $('.searchbox');
            var isOpen = false;
            submitIcon.click(function(){
                if(isOpen == false){
                    searchBox.addClass('searchbox-open');
                    inputBox.focus();
                    isOpen = true;
                } else {
                    searchBox.removeClass('searchbox-open');
                    inputBox.focusout();
                    isOpen = false;
                }
            });  
             submitIcon.mouseup(function(){
                    return false;
                });
            searchBox.mouseup(function(){
                    return false;
                });
            $(document).mouseup(function(){
                    if(isOpen == true){
                        $('.searchbox-icon').css('display','block');
                        submitIcon.click();
                    }
                });
        });
            function buttonUp(){
                var inputVal = $('.searchbox-input').val();
                inputVal = $.trim(inputVal).length;
                if( inputVal !== 0){
                    $('.searchbox-icon').css('display','none');
                } else {
                    $('.searchbox-input').val('');
                    $('.searchbox-icon').css('display','block');
                }
            }
  </script>
  
  
  <style>
  body#bootstrapOverride {
  background-color: rgba(255, 10, 10, 0.8);
}

#random_page{
  cursor: pointer;
  font-size: 16px;
  position: relative;
  top: 240px;
  margin: auto;
  width: 50%;
  color: white;
  text-decoration: none;
}
#SearchBar{
  position: relative;
  margin: auto;
  top: 232px;
  width: 0px;
  left: 0px;
  font-size: 40px;
  padding: 0px;
  cursor: pointer;
   -webkit-transition: all 2s linear 0s;
  -moz-transition: all 2s linear 0s;
  -ms-transition: all 2s linear 0s;
  -o-transition: all 2s linear 0s;
  transition: all 2s linear 0s;
  transition-property: width, border-radius, border, padding;
}

#SearchBar form.clicked{
  position: relative;
  margin: auto;
  top: 0px;
  left: -120px;
  width: 250px;
  padding: 10px;
  border: 5px;
  background-color: white;
  border-radius: 20px;
  font-size: 14px;
}

span{
  cursor: pointer;
  font-size: 0px;
  color: blue;
  font-family: papyrus;
  -webkit-transition: font-size 2s linear 0s;
  -moz-transition: font-size 2s linear 0s;
  -ms-transition: font-size 2s linear 0s;
  -o-transition: font-size 2s linear 0s;
  transition: font-size 2s linear 0s;
}

#genericText{
  position: relative;
  width: 50%;
  margin: auto;
  top: 240px;
  color: white;
  font-type: bold;
  font-size: 16px;
}

.searchbox{
    position:relative;
    min-width:50px;
    width:0%;
    height:50px;
    top: 240px;
    margin: 0 auto;
    overflow:hidden;
    
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}

.searchbox-input {
    top: 0;
    border: 0;
    outline: 0;
    background: transparent;
    width: 200px;
    height: 45px;
    margin: 0 auto;
    padding: 0 10px;
    font-size: 18px;
    color: #fff;
}
.searchbox-input::-webkit-input-placeholder {
    color: #d74b4b;
}
.searchbox-input:-moz-placeholder {
    color: #d74b4b;
}
.searchbox-input::-moz-placeholder {
    color: #d74b4b;
}
.searchbox-input:-ms-input-placeholder {
    color: #d74b4b;
}
.searchbox .searchbox-icon img{display:none;} 
.searchbox-open .searchbox-icon img{display:block !important;} 

.searchbox-icon {
    width: 45px;
    height: 45px;
    display: block;
    position: absolute;
    top: 10px;
    font-family: verdana;
    font-size: 22px;
    right: -10px;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    text-align: center;
    cursor: pointer;
    color: #dcddd8;
}
.searchbox-submit {
    background: transparent;
    color: transparent;
    border: none;
    box-shadow: none;
    position: absolute;
    top: 0;
    height: 45px;
    width: 45px;
    background: url(https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/search-128.png);
    background-size: cover;
}
.searchbox-open .searchbox-submit {
    background: unset;
}
.searchbox-submit img, .searchbox-icon img{
width:22px;
}
.searchbox-open {
    width: 250px;
    border-radius: 20px;
    height: 45px;
    padding: 0;
    background: transparent;
    border: 2px solid #ccc;
}
form.searchbox input.searchbox-input {
    display: none;
}
form.searchbox-open input.searchbox-input {
display: block !important;
background: #fff;
margin: 0;
width: 100%;
color: black;
}

  </style>
</head>
<body id="bootstrapOverride">
  
<div class="container-fluid" id="parent">
  <div id="child">
    <h1 class="text-center"><a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" id="random_page"> Click here for a random article </a></h1>
        <form class="searchbox">
        <input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp();" required>
        <input type="submit" class="searchbox-submit" placeholder="">
        <span class="searchbox-icon"><img src="https://www.materialui.co/materialIcons/navigation/close_black_144x144.png"></span>
    </form>
      <h1 id="genericText" class="text-center"> Click on icon to search </h1>
  </div>
</body>
</html>

如何使用安慰日志到ajax param？

1 个答案: