我在java eclipse中有简单的方法服务,使用数据库postgresql,但是,我想使用javascript或ajax调用html php中的方法?我想使用此服务将数据插入数据库并获取数据,如何在 html/php 中调用此方法?
这是我的控制器
import java.util.Date;
import java.util.List;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.bsm.payroll.model.PayrollModel;
import com.bsm.payroll.repository.PayrollRepoSitory;
@RestController
public class PayrollController {
@Autowired
PayrollRepoSitory payrollRepoSitory;
@GetMapping(value="/payroll")
@Produces(MediaType.APPLICATION_JSON)
public List<PayrollModel> getAllPayroll(){
return payrollRepoSitory.findAll();
}
//yang dipake untuk upload file di db postgresql
@RequestMapping(path ="/coba-payroll-param", method = RequestMethod.POST)
@Produces(MediaType.APPLICATION_JSON)
String savebyparam(@RequestParam("company_id") String company_id, @RequestParam("nama_file") String nama_file) {
PayrollModel payroll;
payroll = new PayrollModel();
payroll.setStatus("0");
payroll.setNameFile(nama_file);
payroll.setCompanyId(company_id);
payroll.setCreationDate(new Date());
payrollRepoSitory.save(payroll);
return nama_file+company_id;
}
}
这是我的绒球.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-rest</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.2.4</version>
</dependency>
<dependency>
<groupId>javax.ws.rs</groupId>
<artifactId>javax.ws.rs-api</artifactId>
<version>2.0.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.postgresql</groupId>
<artifactId>postgresql</artifactId>
<scope>runtime</scope>
</dependency>
这是我的网页
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv= "X-UA-Compatible" content= "ie=edge">
<title> Belajar Dasar Ajax </title>
</head>
<body>
<h1>Tutorial Ajax</h1>
<div id="hasil"></div>
<button onclick="loadContent()">Load Content</button>
<script>
function loadContent(){
var xhr = new XMLHttpRequest();
var url = "http://localhost:8181/payroll";
xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status ==200){
document.getElementById("hasil").innerHTML = this.responseText;
}
};
xhr.open("GET", url, true);
xhr.send();
}
</script>
</body>
</html>
或者你还有其他东西可以将 web 服务从 java 调用到 html/php,因为这是我第一次使用它,而且我没有图片来调用 java webservice 到 html/php
应考虑修改服务器以添加@CrossOrigin
注释,以防止浏览器阻止来自 Web 应用的请求。更多细节在 Mozilla 文档中,并在本春季指南中特定于春季。
注意:此注释还有其他选项,可以增加进一步的安全性或指示您希望基于浏览器的应用程序如何与服务器交互。
java rest 控制器的更新代码如下所示:
import org.springframework.web.bind.annotation.RestController;
import com.bsm.payroll.model.PayrollModel;
import com.bsm.payroll.repository.PayrollRepoSitory;
import org.springframework.web.bind.annotation.CrossOrigin;
@CrossOrigin
@RestController
public class PayrollController {
@Autowired
PayrollRepoSitory payrollRepoSitory;
您上面的代码是获取数据的一种方法,有许多工具/框架/库,但我将使用下面的实现进行响应。
检索内容
<script>
function loadContent(){
var xhr = new XMLHttpRequest();
var url = "http://localhost:8181/payroll";
xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status ==200){
var dataAsString = this.responseText; //this is a string
//your method seems to return a list of payrol items/objects
//you may be interested in displaying each of these as such
//you should parse the JSON (usual default) data returned from the
//server into an object,
var data = JSON.parse(dataAsString);
//now you should have an array or payrol items.
//Let's say that you would like to display a list of "name" s
document.getElementById("hasil").innerHTML = '';
for(var i=0;i<data.length;i++){
document.getElementById("hasil").innerHTML +='<p>'+data[i].name+'</p>' ;
}
}
};
xhr.open("GET", url, true);
xhr.send();
}
</script>
保存内容
我注意到您正在发布的内容在考虑宁静的约定时很好。在另一个迭代中,您可以考虑使用以下@RequestBody
传递数据,在此处查看更多详细信息。但是,对于您的实现,可以将数据保存到服务器的方法可能如下所示:
<script>
function saveCobaPayrollParam(companyId, nameFile){
var xhr = new XMLHttpRequest();
//we will pass data using the query string
//NB how we have a question sign (?) separating the url and the data
//the data is represented as a set of key=value pairs and separated
//by an ampersand
var url = "http://localhost:8181/coba-payroll-param?company_id="+companyId+"&nama_file="+nameFile;
xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status ==200){
var dataAsString = this.responseText; //this is a string
//you could provide additional confirmation here eg.
alert("This operation was successful")
}
};
//NB I have changed the request method from GET to POST
xhr.open("POST", url, true);
xhr.send();
}
</script>
您的XHR
请求来自跨域,可能是您的请求被浏览器的CORS Policy
阻止。
您应该使用@CrossOrigin
注释在 spring 应用程序中启用CORS
,也可以通过实现WebMvcConfigurer
在整个应用程序中启用CORS
查看此教程。
您可以从MDN获取有关CORS
的详细信息