Asynchronous visualforce javascript远程处理无法正常工作

Asynchronous visualforce javascript远程处理无法正常工作,asynchronous,salesforce,visualforce,apex,Asynchronous,Salesforce,Visualforce,Apex,我试图创建一些html元素作为对visualforce页面中按钮单击的响应,我使用javascript远程处理,但无论我做什么,按钮单击后页面都会保持刷新 我的视觉力页面: <apex:page Controller="BpmIcountPayment"> <head> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src=

我试图创建一些html元素作为对visualforce页面中按钮单击的响应,我使用javascript远程处理,但无论我做什么,按钮单击后页面都会保持刷新

我的视觉力页面:

<apex:page Controller="BpmIcountPayment">
<head>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
</head>
<body>
<script>

    function addProductRow(e) {
        e.preventDefault();
        var productId = $('select[id$=productsLov]').val();
        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.BpmIcountPayment.getProductRowData}',
            productId,
        function(result, event) {
            if  (event.status) {
                productRowHtml = '<div id="p-' + result.Id + '">';
                productRowHtml += '<span>' + result.Description + '<span>';
                productRowHtml += '<button class="plusButton">+</button><input type="number">1</input><button class="minusButton">-</button>';
                if (result.Name == 'discount') {
                    productRowHtml += '<input classtype="number"></input><span>₪</span>';
                };
                productRowHtml += '<span>' + result.Price + '₪</span>';
                $('div[id$=productRows]').append(productRowHtml);
            } else if (event.type === 'exception') {
                console.log(event.message + '   ' + event.where);
            } else {
                console.log('else   ' + event.message);
            }
        }, {escape: true});
    }

</script>
</body>
<apex:form >
<div>
    <apex:selectList id="productsLov" value="{!productsTitle}" multiselect="false" size="1">
        <apex:selectOptions value="{!ProductsLov}"></apex:selectOptions>
    </apex:selectList>
    <button id="addProductButton" onclick="addProductRow()" reRender="false">add product</button>
</div>
<div id="productsRows">
</div>
</apex:form>
</apex:page>
我甚至设法将结果打印到控制台中,但它在刷新页面后就这样做了

我的控制器:

public class BpmIcountPayment{

private final Account account;

public String productsTitle {
  get { return 'products'; }
  set;
}

public List<Product2> productsList {
  get { return productsList; }
  set { productsList = value; }
}

public BpmIcountPayment() {
    account = [SELECT Id, Name, Site FROM Account
               WHERE Id = :ApexPages.currentPage().getParameters().get('id')];
}

public Account getAccount() {
    return account;
}

@RemoteAction
public static Product2 getProductRowData(string productId) {
    Product2 product = [SELECT Id, Name, Family, Price__c, Description 
                        FROM Product2 
                        WHERE Id = :productId];

    return product;
}

public List<SelectOption> getProductsLov() {
    List<SelectOption> products = new List<SelectOption>();
    productsList = [SELECT Id, Name, Family, Price__c, Description 
                    FROM Product2 
                    WHERE (Family = 'ShopProduct') 
                    OR (Family = 'CourseParent') 
                    OR (Family = 'SFCourseProgram')];

    for (Product2 currProduct : productsList) {
        products.add(new SelectOption(currProduct.Id, currProduct.Name));
    }

    return products;
}}

我发现了问题!这只是一个将按钮类型定义为button的例子,因为默认值是submit,这导致页面重新呈现

您的意思是这样放置之后它就可以工作了。从那时起,代码发生了很大变化,但我确实找到了行,就像现在一样:当addProduct是调用远程操作的函数时。