$(document(.ready(function(({$("#get"(.点击(function(({
debugger;
$.ajax({
url: `https://jsonplaceholder.typicode.com/posts`,
type:'#method',
data: {
title:$("#title ").val(),
body : $("#body").val(),
userId : $("#userid").val(),
},
dataType: 'json',
success: function(data) {
$.each(data, function(i, item) {
$("tbody").append("<tr><td>" + item.id + "</td><td>" + item.title + "</td><td>" + item.body + "</td><td>" + item.userId + "</td></tr>");
// url.value = "";
method.value = "";
title.value = "";
body.value = "";
userid.value = "";
});
},
});
});
})；
$(document).ready(function() {
$("#post").click(function() {
// debugger;
$.ajax({
url: `https://jsonplaceholder.typicode.com/posts`,
type: '#method',
data: {
title : $("#title ").val(),
body : $("#body").val(),
userId : $("#userid").val(),
},
dataType: 'json',
success: function(data) {
$("tbody").append("<tr><td>" + data.id + "</td><td>" + data.title + "</td><td>" + data.body + "</td><td>" + data.userId + "</td></tr>");
// url.value = "";
method.value = "";
title.value = "";
body.value = "";
userid.value = "";
}
});
});
});
$(document).ready(function() {
$("#get").click(function() {
debugger;
$.ajax({
url: `https://jsonplaceholder.typicode.com/posts`,
type:'#method',
data: {
title:$("#title ").val(),
body : $("#body").val(),
userId : $("#userid").val(),
},
dataType: 'json',
success: function(data) {
$.each(data, function(i, item) {
$("tbody").append("<tr><td>" + item.id + "</td><td>" + item.title + "</td><td>" + item.body + "</td><td>" + item.userId + "</td></tr>");
// url.value = "";
method.value = "";
title.value = "";
body.value = "";
userid.value = "";
});
},
});
});
});body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box
}
/* Full-width input fields */
input[type=text],
input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus,
input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for all buttons */
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity: 1;
}
/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn,
.signupbtn {
float: left;
width: 50%;
}
/* Add padding to container elements */
.container {
padding: 16px;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
.cancelbtn,
.signupbtn {
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Form</h1>
<hr>
<!-- <label for="url"><b>Url</b></label>
<input type="text" placeholder="Enter id" name="url" id="url" required> -->
<label for="name"><b>Method</b></label>
<input type="text" placeholder="Enter name" name="method" id="method" required>
<label for="title"><b>title</b></label>
<input type="text" placeholder="Enter title" name="title" id="title" required>
<label for="body"><b>body</b></label>
<input type="text" placeholder="Enter body" name="body" id="body" required>
<label for="userid"><b>userid</b></label>
<input type="text" placeholder="Enter userid" name="userid" id="userid" required>
<button id="post">post</button>
<button id="get">get</button>
</div>
<div class="container">
<table class="table table-striped" id="show">
<thead>
<tr>
<th><b>id</b></th>
<th><b>title</b> </th>
<th><b>body</b></th>
<th><b>userId</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="index.js"></script>
</body>
</html>**我在这段代码中遇到了一个问题。我创建了两个函数，一个用于ajax post-request，另一个用于seconed-get-ajax-request。但在get函数中，我遇到了问题
您可以尝试
type:$('#method').val(),
而不是type:'#method',